From 95bce2bbad0d63b877aadd8d6b4e2a8b831319cc Mon Sep 17 00:00:00 2001
From: Pontoporeia <pontoporeia@happyngreen.fr>
Date: Wed, 22 Apr 2026 11:18:52 +0200
Subject: [PATCH] Extract form CSS into form.css; scope system.css to
 system.php only

---
 TODO.md                         |   2 +
 app/public/admin/add.php        |   1 +
 app/public/admin/edit.php       |   1 +
 app/public/assets/css/admin.css | 460 +-----------------------
 app/public/assets/css/form.css  | 604 ++++++++++++++++++++++++++++++++
 app/public/partage/index.php    |  70 +---
 app/public/partage/thanks.php   |  79 +----
 7 files changed, 636 insertions(+), 581 deletions(-)
 create mode 100644 app/public/assets/css/form.css

diff --git a/TODO.md b/TODO.md
index 5bf23ca..cc5db90 100644
--- a/TODO.md
+++ b/TODO.md
@@ -8,3 +8,5 @@
 - [x] Fix SmtpRelay::send() — replace broken mail() stub with native PHP socket SMTP client (STARTTLS/SSL, AUTH PLAIN/LOGIN)
 - [x] Lock body scroll on all pages (admin + public); only `main` or inner element scrolls
 - [x] Unify form CSS between admin `add.php` and student partage form: move licence/share-badge styles into `admin.css`, remove inline `<style>` from `partage/index.php`, switch to `common.css` + `admin.css`
+- [x] Extract form CSS into `form.css`; load it in admin add/edit via `$extraCss` and in student partage form directly; `system.css` now only used by `system.php`; `partage/thanks.php` rewritten to use design-system classes
+- [x] Fix student form scroll (add `overflow-y:auto` to `.student-body`); move all remaining inline styles from partage error/password-gate pages into `form.css`
diff --git a/app/public/admin/add.php b/app/public/admin/add.php
index 315d35d..c54245f 100644
--- a/app/public/admin/add.php
+++ b/app/public/admin/add.php
@@ -45,6 +45,7 @@ function wasSelected($key, $value) {
 
 $isAdmin = true;
 $bodyClass = 'admin-body';
+$extraCss  = ['/assets/css/form.css'];
 require_once APP_ROOT . '/templates/head.php';
 include APP_ROOT . '/templates/header.php';
 include APP_ROOT . '/templates/admin/add.php';
diff --git a/app/public/admin/edit.php b/app/public/admin/edit.php
index f0a4dbe..216693e 100644
--- a/app/public/admin/edit.php
+++ b/app/public/admin/edit.php
@@ -27,6 +27,7 @@ try {
 }
 
 $isAdmin = true; $bodyClass = 'admin-body';
+$extraCss  = ['/assets/css/form.css'];
 require_once APP_ROOT . '/templates/head.php';
 include APP_ROOT . '/templates/header.php';
 include APP_ROOT . '/templates/admin/edit.php';
diff --git a/app/public/assets/css/admin.css b/app/public/assets/css/admin.css
index f72bfb4..ca9d000 100644
--- a/app/public/assets/css/admin.css
+++ b/app/public/assets/css/admin.css
@@ -67,206 +67,7 @@
     margin: 0 0 var(--space-l) 0;
 }
 
-/* ── Forms ─────────────────────────────────────────────────────────────── */
-.admin-form {
-    display: flex;
-    flex-direction: column;
-    gap: 0;
-}
-
-.admin-form > div:not(.admin-form-footer) {
-    display: grid;
-    grid-template-columns: 260px 1fr;
-    align-items: start;
-    border-top: 1px solid var(--border-primary);
-    padding: var(--space-xs) 0;
-    gap: var(--space-s);
-}
-
-.admin-form > div:not(.admin-form-footer):last-of-type {
-    border-bottom: 1px solid var(--border-primary);
-}
-
-.admin-form > div:not(.admin-form-footer) > label,
-.admin-form > div:not(.admin-form-footer) > span.admin-row-label {
-    font-size: var(--step--1);
-    padding-top: var(--space-2xs);
-    font-weight: 400;
-}
-
-.admin-form
-    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(
-        [type="hidden"]
-    ):not([type="submit"]),
-.admin-form select,
-.admin-form textarea,
-.admin-inline-form input[type="text"],
-.admin-inline-form input[type="number"],
-.admin-inline-form select {
-    width: 100%;
-    background: transparent;
-    border: none;
-    border-bottom: 1px solid var(--border-primary);
-    font-size: var(--step--1);
-    font-family: inherit;
-    padding: var(--space-3xs) 0;
-    border-radius: 0;
-    transition: border-color 0.15s;
-    -webkit-appearance: none;
-    appearance: none;
-}
-
-.admin-form
-    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(
-        [type="hidden"]
-    ):not([type="submit"]):focus,
-.admin-form select:focus,
-.admin-form textarea:focus,
-.admin-inline-form input:focus,
-.admin-inline-form select:focus {
-    outline: none;
-    border-bottom-color: var(--accent-primary);
-}
-
-.admin-form input::placeholder,
-.admin-form textarea::placeholder {
-    font-size: var(--step--1);
-    color: var(--text-tertiary);
-}
-
-.admin-form textarea {
-    resize: vertical;
-    min-height: 100px;
-    line-height: 1.5;
-}
-
-/* Select custom arrow */
-.admin-form select,
-.admin-inline-form select {
-    cursor: pointer;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
-    background-repeat: no-repeat;
-    background-position: right 0 center;
-    padding-right: 1.2rem;
-}
-
-/* Required-field indicator */
-.admin-form
-    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(
-        [type="hidden"]
-    ):not([type="submit"]):required,
-.admin-form select:required,
-.admin-form textarea:required {
-    border-bottom-style: dashed;
-}
-
-.admin-form
-    div:has(
-        input:required:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"])) > label,
-.admin-form div:has(select:required) > label,
-.admin-form div:has(textarea:required) > label {
-    font-weight: 600;
-}
-
-/* Required-field indicator (student form / generic labels) */
-label:has(+ input:required:not([type="hidden"]))::after,
-label:has(+ select:required)::after,
-label:has(+ textarea:required)::after,
-label:has(+ div > input:required)::after {
-    content: " *";
-    color: var(--error, #c00);
-}
-
-/* Visually-hidden "required fields marked with *" note */
-.required-note {
-    font-size: var(--step--2);
-    color: var(--text-secondary);
-    margin-bottom: var(--space-xs);
-}
-.required-note .asterisk {
-    color: var(--error, #c00);
-}
-
-/* File inputs */
-.admin-file-input {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-3xs);
-}
-
-.admin-file-input input[type="file"] {
-    font-size: var(--step--1);
-    background: transparent;
-    border: 1px dashed var(--border-primary);
-    padding: var(--space-3xs) var(--space-2xs);
-    border-radius: 3px;
-    cursor: pointer;
-    font-family: inherit;
-}
-
-.admin-file-input input[type="file"]:hover {
-    border-color: var(--accent-primary);
-}
-
-.admin-body form small {
-    font-size: var(--step--2);
-    color: var(--text-secondary);
-    margin-top: var(--space-3xs);
-    display: block;
-}
-
-/* Checkbox group fieldset (languages, formats) */
-.admin-body fieldset.admin-checkbox-group {
-    border: none;
-    padding: 0;
-    margin: 0;
-    background: transparent;
-}
-
-.admin-body fieldset.admin-checkbox-group > ul {
-    list-style: none;
-    margin: 0;
-    padding-top: var(--space-3xs);
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-3xs);
-}
-
-.admin-body fieldset.admin-checkbox-group > ul > li {
-    display: contents;
-}
-
-.admin-checkbox-label {
-    display: flex;
-    align-items: center;
-    gap: var(--space-2xs);
-    font-size: var(--step--1);
-    cursor: pointer;
-}
-
-.admin-checkbox-label input[type="checkbox"] {
-    accent-color: var(--accent-primary);
-    width: 14px;
-    height: 14px;
-    cursor: pointer;
-}
-
-/* Fieldset / legend (jury) */
-.admin-body fieldset {
-    border: 1px solid var(--border-primary);
-    padding: var(--space-s) var(--space-m);
-    margin: var(--space-2xs) 0 var(--space-s);
-    background: var(--bg-secondary);
-}
-
-.admin-body legend {
-    font-size: var(--step--1);
-    font-weight: 600;
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
-    color: var(--text-secondary);
-    padding: 0 var(--space-2xs);
-}
+/* ── Form styles → see form.css ─────────────────────────────────────────── */
 
 /* ── Buttons ────────────────────────────────────────────────────────────── */
 .admin-form-footer {
@@ -981,68 +782,7 @@ label:has(+ div > input:required)::after {
     padding: 0;
 }
 
-/* ── Jury fieldset ──────────────────────────────────────────────────────── */
-
-.admin-body fieldset fieldset.admin-jury-lecteurs {
-    border: none;
-    padding: 0;
-    margin: var(--space-xs) 0 0;
-    background: transparent;
-}
-
-.admin-body fieldset fieldset.admin-jury-lecteurs > legend {
-    font-size: var(--step--2);
-    font-weight: 600;
-    letter-spacing: 0.03em;
-    text-transform: uppercase;
-    color: var(--text-tertiary);
-    padding: 0;
-    margin-bottom: var(--space-2xs);
-}
-
-.admin-jury-row {
-    display: flex;
-    gap: var(--space-xs);
-    flex-wrap: wrap;
-}
-
-.admin-jury-list {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-2xs);
-}
-
-.admin-jury-entry {
-    display: flex;
-    align-items: center;
-    gap: var(--space-xs);
-}
-
-.admin-jury-ext {
-    white-space: nowrap;
-}
-
-.admin-btn-remove {
-    background: none;
-    border: 1px solid var(--border-primary);
-    color: var(--text-tertiary);
-    border-radius: 3px;
-    padding: var(--space-3xs) var(--space-2xs);
-    min-height: 2rem;
-    font-size: var(--step--2);
-    line-height: 1;
-    display: inline-flex;
-    align-items: center;
-    cursor: pointer;
-    transition:
-        border-color 0.15s,
-        color 0.15s;
-}
-
-.admin-btn-remove:hover {
-    border-color: var(--error);
-    color: var(--error);
-}
+/* ── Jury fieldset → see form.css ───────────────────────────────────────── */
 
 /* ── Inline form (tags page) ────────────────────────────────────────────── */
 .admin-inline-form {
@@ -1901,199 +1641,5 @@ label:has(+ div > input:required)::after {
     transform: translateX(18px);
 }
 
-/* ── Form group (for checkbox inside .admin-form) ──────────────────────────── */
-.admin-form-group {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-3xs);
-}
 
-/* ════ Student mode (modifier on admin-body) ════════════════════════════════ */
-.student-body main {
-    max-width: 720px;
-}
-
-.thesis-add-header {
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: var(--space-m);
-    margin-bottom: var(--space-m);
-    border-bottom: 1px solid var(--border-primary);
-    padding-bottom: var(--space-xs);
-}
-
-.thesis-add-header h1 {
-    margin: 0;
-    font-size: var(--step-1);
-    font-weight: 600;
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-}
-
-.mode-toggle {
-    font-size: var(--step--1);
-    color: var(--text-secondary);
-    text-decoration: none;
-    white-space: nowrap;
-    border: 1px solid var(--border-primary);
-    border-radius: 3px;
-    padding: var(--space-3xs) var(--space-xs);
-    transition: color 0.15s, border-color 0.15s;
-}
-
-.mode-toggle:hover {
-    color: var(--accent-primary);
-    border-color: var(--accent-primary);
-}
-
-.mode-toggle--back {
-    color: var(--accent-blue);
-    border-color: var(--blue-muted-border, var(--border-primary));
-}
-
-.form-footer {
-    margin-top: var(--space-l);
-}
-
-.form-footer button {
-    padding: var(--space-2xs) var(--space-l);
-    background: var(--accent-primary);
-    color: var(--accent-foreground);
-    border: none;
-    border-radius: 3px;
-    font-size: var(--step--1);
-    font-family: inherit;
-    cursor: pointer;
-    letter-spacing: 0.04em;
-    transition: background 0.15s;
-}
-
-.form-footer button:hover {
-    background: var(--accent-secondary);
-}
-
-/* ── Share link badge ──────────────────────────────────────────────────── */
-.share-badge {
-    display: inline-block;
-    padding: var(--space-3xs) var(--space-xs);
-    background: var(--blue-muted-bg);
-    border: 1px solid var(--blue-muted-border, var(--border-primary));
-    border-radius: 3px;
-    font-size: var(--step--2);
-    margin-bottom: var(--space-xs);
-}
-
-/* ── Licence / degrees-of-openness block (student share form) ───────────── */
-.licence-explanation {
-    background: var(--bg-secondary);
-    border-left: 4px solid var(--border-secondary, var(--border-primary));
-    padding: var(--space-m);
-    margin: 0;
-}
-
-.licence-explanation legend {
-    font-size: var(--step--1);
-    font-weight: 600;
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
-    color: var(--text-secondary);
-    padding: 0 var(--space-2xs);
-}
-
-.licence-info h3 {
-    margin-top: var(--space-m);
-    font-size: var(--step-0);
-}
-
-.licence-degree {
-    margin: var(--space-s) 0;
-    padding: var(--space-s);
-    background: var(--bg-primary);
-    border: 1px solid var(--border-primary);
-    border-radius: 4px;
-}
-
-.licence-degree h4 {
-    margin: 0 0 var(--space-2xs);
-    font-size: var(--step--1);
-    font-weight: 600;
-}
-
-.licence-note {
-    color: var(--text-secondary);
-    font-size: var(--step--2);
-    margin-top: var(--space-2xs);
-}
-
-.licence-generalites {
-    margin-top: var(--space-m);
-}
-
-.licence-generalites h3 {
-    font-size: var(--step-0);
-    margin-bottom: var(--space-xs);
-}
-
-/* ── Student thanks page ────────────────────────────────────────────────── */
-.thanks-student-page {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    min-height: 60vh;
-    text-align: center;
-}
-
-.thanks-success,
-.thanks-error {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: var(--space-m);
-    max-width: 520px;
-}
-
-.thanks-success h1,
-.thanks-error h1 {
-    font-size: var(--step-3);
-    margin: 0;
-    letter-spacing: 0.06em;
-}
-
-.thanks-message {
-    font-size: var(--step-0);
-    color: var(--text-primary);
-    margin: 0;
-    line-height: 1.6;
-}
-
-.thanks-error p {
-    font-size: var(--step-0);
-    color: var(--text-secondary);
-    margin: 0;
-}
-
-.btn-new-form {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--space-2xs);
-    padding: var(--space-m) var(--space-2xl);
-    background: var(--accent-primary);
-    color: var(--accent-foreground);
-    border: none;
-    border-radius: 6px;
-    font-size: var(--step-0);
-    font-weight: 600;
-    font-family: inherit;
-    text-decoration: none;
-    cursor: pointer;
-    letter-spacing: 0.04em;
-    transition: background 0.15s, transform 0.15s;
-    margin-top: var(--space-s);
-}
-
-.btn-new-form:hover {
-    background: var(--accent-secondary);
-    transform: translateY(-1px);
-}
+/* ── Form group, student mode, thanks page → see form.css ───────────────── */
diff --git a/app/public/assets/css/form.css b/app/public/assets/css/form.css
new file mode 100644
index 0000000..bd7cbbb
--- /dev/null
+++ b/app/public/assets/css/form.css
@@ -0,0 +1,604 @@
+/* ============================================================
+   FORM — TFE submission form
+   Shared between admin add/edit pages and the student partage form.
+   Depends on variables.css (loaded via common.css).
+   ============================================================ */
+
+/* ── Field rows & layout ────────────────────────────────────────────────── */
+.admin-form {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+}
+
+.admin-form > div:not(.admin-form-footer) {
+    display: grid;
+    grid-template-columns: 260px 1fr;
+    align-items: start;
+    border-top: 1px solid var(--border-primary);
+    padding: var(--space-xs) 0;
+    gap: var(--space-s);
+}
+
+.admin-form > div:not(.admin-form-footer):last-of-type {
+    border-bottom: 1px solid var(--border-primary);
+}
+
+.admin-form > div:not(.admin-form-footer) > label,
+.admin-form > div:not(.admin-form-footer) > span.admin-row-label {
+    font-size: var(--step--1);
+    padding-top: var(--space-2xs);
+    font-weight: 400;
+}
+
+/* ── Inputs, selects, textareas ─────────────────────────────────────────── */
+.admin-form
+    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(
+        [type="hidden"]
+    ):not([type="submit"]),
+.admin-form select,
+.admin-form textarea,
+.admin-inline-form input[type="text"],
+.admin-inline-form input[type="number"],
+.admin-inline-form select {
+    width: 100%;
+    background: transparent;
+    border: none;
+    border-bottom: 1px solid var(--border-primary);
+    font-size: var(--step--1);
+    font-family: inherit;
+    padding: var(--space-3xs) 0;
+    border-radius: 0;
+    transition: border-color 0.15s;
+    -webkit-appearance: none;
+    appearance: none;
+}
+
+.admin-form
+    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(
+        [type="hidden"]
+    ):not([type="submit"]):focus,
+.admin-form select:focus,
+.admin-form textarea:focus,
+.admin-inline-form input:focus,
+.admin-inline-form select:focus {
+    outline: none;
+    border-bottom-color: var(--accent-primary);
+}
+
+.admin-form input::placeholder,
+.admin-form textarea::placeholder {
+    font-size: var(--step--1);
+    color: var(--text-tertiary);
+}
+
+.admin-form textarea {
+    resize: vertical;
+    min-height: 100px;
+    line-height: 1.5;
+}
+
+/* Select custom arrow */
+.admin-form select,
+.admin-inline-form select {
+    cursor: pointer;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 0 center;
+    padding-right: 1.2rem;
+}
+
+/* ── Required-field indicators ──────────────────────────────────────────── */
+.admin-form
+    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(
+        [type="hidden"]
+    ):not([type="submit"]):required,
+.admin-form select:required,
+.admin-form textarea:required {
+    border-bottom-style: dashed;
+}
+
+.admin-form
+    div:has(
+        input:required:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"])) > label,
+.admin-form div:has(select:required) > label,
+.admin-form div:has(textarea:required) > label {
+    font-weight: 600;
+}
+
+/* Asterisk appended to labels of required fields */
+label:has(+ input:required:not([type="hidden"]))::after,
+label:has(+ select:required)::after,
+label:has(+ textarea:required)::after,
+label:has(+ div > input:required)::after {
+    content: " *";
+    color: var(--error, #c00);
+}
+
+/* "* Champs obligatoires" note */
+.required-note {
+    font-size: var(--step--2);
+    color: var(--text-secondary);
+    margin-bottom: var(--space-xs);
+}
+.required-note .asterisk {
+    color: var(--error, #c00);
+}
+
+/* ── File inputs ────────────────────────────────────────────────────────── */
+.admin-file-input {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3xs);
+}
+
+.admin-file-input input[type="file"] {
+    font-size: var(--step--1);
+    background: transparent;
+    border: 1px dashed var(--border-primary);
+    padding: var(--space-3xs) var(--space-2xs);
+    border-radius: 3px;
+    cursor: pointer;
+    font-family: inherit;
+}
+
+.admin-file-input input[type="file"]:hover {
+    border-color: var(--accent-primary);
+}
+
+.admin-file-hint {
+    display: block;
+    margin-top: var(--space-2xs);
+}
+
+.admin-body form small,
+.student-body form small {
+    font-size: var(--step--2);
+    color: var(--text-secondary);
+    margin-top: var(--space-3xs);
+    display: block;
+}
+
+/* ── Checkbox groups (languages, formats) ───────────────────────────────── */
+.admin-body fieldset.admin-checkbox-group,
+.student-body fieldset.admin-checkbox-group {
+    border: none;
+    padding: 0;
+    margin: 0;
+    background: transparent;
+}
+
+.admin-body fieldset.admin-checkbox-group > ul,
+.student-body fieldset.admin-checkbox-group > ul {
+    list-style: none;
+    margin: 0;
+    padding-top: var(--space-3xs);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3xs);
+}
+
+.admin-body fieldset.admin-checkbox-group > ul > li,
+.student-body fieldset.admin-checkbox-group > ul > li {
+    display: contents;
+}
+
+.admin-checkbox-label {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2xs);
+    font-size: var(--step--1);
+    cursor: pointer;
+}
+
+.admin-checkbox-label input[type="checkbox"] {
+    accent-color: var(--accent-primary);
+    width: 14px;
+    height: 14px;
+    cursor: pointer;
+}
+
+/* ── Fieldsets & legends ────────────────────────────────────────────────── */
+.admin-body fieldset,
+.student-body fieldset {
+    border: 1px solid var(--border-primary);
+    padding: var(--space-s) var(--space-m);
+    margin: var(--space-2xs) 0 var(--space-s);
+    background: var(--bg-secondary);
+}
+
+.admin-body legend,
+.student-body legend {
+    font-size: var(--step--1);
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--text-secondary);
+    padding: 0 var(--space-2xs);
+}
+
+/* ── Form group (checkbox inline inside .admin-form) ────────────────────── */
+.admin-form-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3xs);
+}
+
+/* ── Jury fieldset ──────────────────────────────────────────────────────── */
+.admin-body fieldset fieldset.admin-jury-lecteurs,
+.student-body fieldset fieldset.admin-jury-lecteurs {
+    border: none;
+    padding: 0;
+    margin: var(--space-xs) 0 0;
+    background: transparent;
+}
+
+.admin-body fieldset fieldset.admin-jury-lecteurs > legend,
+.student-body fieldset fieldset.admin-jury-lecteurs > legend {
+    font-size: var(--step--2);
+    font-weight: 600;
+    letter-spacing: 0.03em;
+    text-transform: uppercase;
+    color: var(--text-tertiary);
+    padding: 0;
+    margin-bottom: var(--space-2xs);
+}
+
+.admin-jury-row {
+    display: flex;
+    gap: var(--space-xs);
+    flex-wrap: wrap;
+}
+
+.admin-jury-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2xs);
+}
+
+.admin-jury-entry {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs);
+}
+
+.admin-jury-ext {
+    white-space: nowrap;
+}
+
+.admin-btn-remove {
+    background: none;
+    border: 1px solid var(--border-primary);
+    color: var(--text-tertiary);
+    border-radius: 3px;
+    padding: var(--space-3xs) var(--space-2xs);
+    min-height: 2rem;
+    font-size: var(--step--2);
+    line-height: 1;
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    transition:
+        border-color 0.15s,
+        color 0.15s;
+}
+
+.admin-btn-remove:hover {
+    border-color: var(--error);
+    color: var(--error);
+}
+
+/* ── Add / edit page header ─────────────────────────────────────────────── */
+.thesis-add-header {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--space-m);
+    margin-bottom: var(--space-m);
+    border-bottom: 1px solid var(--border-primary);
+    padding-bottom: var(--space-xs);
+}
+
+.thesis-add-header h1 {
+    margin: 0;
+    font-size: var(--step-1);
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+}
+
+.mode-toggle {
+    font-size: var(--step--1);
+    color: var(--text-secondary);
+    text-decoration: none;
+    white-space: nowrap;
+    border: 1px solid var(--border-primary);
+    border-radius: 3px;
+    padding: var(--space-3xs) var(--space-xs);
+    transition: color 0.15s, border-color 0.15s;
+}
+
+.mode-toggle:hover {
+    color: var(--accent-primary);
+    border-color: var(--accent-primary);
+}
+
+.mode-toggle--back {
+    color: var(--accent-blue);
+    border-color: var(--blue-muted-border, var(--border-primary));
+}
+
+/* ── Submit / form footer ───────────────────────────────────────────────── */
+.form-footer {
+    margin-top: var(--space-l);
+}
+
+.form-footer button {
+    padding: var(--space-2xs) var(--space-l);
+    background: var(--accent-primary);
+    color: var(--accent-foreground);
+    border: none;
+    border-radius: 3px;
+    font-size: var(--step--1);
+    font-family: inherit;
+    cursor: pointer;
+    letter-spacing: 0.04em;
+    transition: background 0.15s;
+}
+
+.form-footer button:hover {
+    background: var(--accent-secondary);
+}
+
+/* ── Flash messages ─────────────────────────────────────────────────────── */
+.flash-error,
+.flash-success {
+    padding: var(--space-xs) var(--space-s);
+    border-radius: 4px;
+    font-size: var(--step--1);
+    margin-bottom: var(--space-s);
+    border-left: 3px solid;
+}
+
+.flash-error {
+    background: var(--accent-muted);
+    border-color: var(--error);
+    color: var(--text-primary);
+}
+
+.flash-success {
+    background: var(--success-muted-bg);
+    border-color: var(--success);
+    color: var(--text-primary);
+}
+
+/* ── Share link badge ───────────────────────────────────────────────────── */
+.share-badge {
+    display: inline-block;
+    padding: var(--space-3xs) var(--space-xs);
+    background: var(--blue-muted-bg);
+    border: 1px solid var(--blue-muted-border, var(--border-primary));
+    border-radius: 3px;
+    font-size: var(--step--2);
+    margin-bottom: var(--space-xs);
+}
+
+/* ── Licence / degrees-of-openness block ────────────────────────────────── */
+.licence-explanation {
+    background: var(--bg-secondary);
+    border-left: 4px solid var(--border-secondary, var(--border-primary));
+    padding: var(--space-m);
+    margin: 0;
+}
+
+.licence-explanation legend {
+    font-size: var(--step--1);
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--text-secondary);
+    padding: 0 var(--space-2xs);
+}
+
+.licence-info h3 {
+    margin-top: var(--space-m);
+    font-size: var(--step-0);
+}
+
+.licence-degree {
+    margin: var(--space-s) 0;
+    padding: var(--space-s);
+    background: var(--bg-primary);
+    border: 1px solid var(--border-primary);
+    border-radius: 4px;
+}
+
+.licence-degree h4 {
+    margin: 0 0 var(--space-2xs);
+    font-size: var(--step--1);
+    font-weight: 600;
+}
+
+.licence-note {
+    color: var(--text-secondary);
+    font-size: var(--step--2);
+    margin-top: var(--space-2xs);
+}
+
+.licence-generalites {
+    margin-top: var(--space-m);
+}
+
+.licence-generalites h3 {
+    font-size: var(--step-0);
+    margin-bottom: var(--space-xs);
+}
+
+/* ── Student-mode layout ────────────────────────────────────────────────── */
+
+/* Standalone page (no admin header/footer): restore scrollability that
+   common.css removes via overflow:hidden on html,body. */
+.student-body {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    overflow-y: auto;
+}
+
+.student-body main {
+    max-width: 720px;
+    padding: var(--space-l) var(--space-l) var(--space-2xl);
+    width: 100%;
+    margin-inline: auto;
+}
+
+/* ── Share-link error page ──────────────────────────────────────────────── */
+.share-error {
+    max-width: 500px;
+    margin: 5rem auto;
+    padding: var(--space-xl);
+    text-align: center;
+    background: var(--bg-primary);
+    border: 2px solid var(--error);
+    border-radius: 8px;
+}
+
+.share-error h1 {
+    color: var(--error);
+    font-size: var(--step-1);
+    margin-bottom: var(--space-s);
+}
+
+.share-error p {
+    font-size: var(--step-0);
+    color: var(--text-secondary);
+    margin-bottom: var(--space-m);
+}
+
+.share-error a {
+    display: inline-block;
+    padding: var(--space-2xs) var(--space-m);
+    background: var(--text-primary);
+    color: var(--bg-primary);
+    text-decoration: none;
+    border-radius: 4px;
+    transition: opacity 0.15s;
+}
+
+.share-error a:hover {
+    opacity: 0.8;
+}
+
+/* ── Password gate page ─────────────────────────────────────────────────── */
+.password-gate {
+    max-width: 400px;
+    margin: 4rem auto;
+    padding: var(--space-l);
+    text-align: center;
+}
+
+.password-gate h1 {
+    margin-bottom: var(--space-m);
+}
+
+.password-gate input[type="password"] {
+    width: 100%;
+    padding: var(--space-xs);
+    margin: var(--space-2xs) 0 var(--space-s);
+    font-size: var(--step--1);
+    font-family: inherit;
+    border: 1px solid var(--border-primary);
+    border-radius: 3px;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+}
+
+.password-gate input[type="password"]:focus {
+    outline: none;
+    border-color: var(--accent-primary);
+}
+
+.password-gate button {
+    padding: var(--space-xs) var(--space-l);
+    font-size: var(--step--1);
+    font-family: inherit;
+    cursor: pointer;
+    background: var(--accent-primary);
+    color: var(--accent-foreground);
+    border: none;
+    border-radius: 3px;
+    transition: background 0.15s;
+}
+
+.password-gate button:hover {
+    background: var(--accent-secondary);
+}
+
+.password-error {
+    color: var(--error);
+    margin-bottom: var(--space-s);
+    font-size: var(--step--1);
+}
+
+/* ── Thanks page ────────────────────────────────────────────────────────── */
+.thanks-student-page {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 60vh;
+    text-align: center;
+}
+
+.thanks-success,
+.thanks-error {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-m);
+    max-width: 520px;
+}
+
+.thanks-success h1,
+.thanks-error h1 {
+    font-size: var(--step-3);
+    margin: 0;
+    letter-spacing: 0.06em;
+}
+
+.thanks-message {
+    font-size: var(--step-0);
+    color: var(--text-primary);
+    margin: 0;
+    line-height: 1.6;
+}
+
+.thanks-error p {
+    font-size: var(--step-0);
+    color: var(--text-secondary);
+    margin: 0;
+}
+
+.btn-new-form {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2xs);
+    padding: var(--space-m) var(--space-2xl);
+    background: var(--accent-primary);
+    color: var(--accent-foreground);
+    border: none;
+    border-radius: 6px;
+    font-size: var(--step-0);
+    font-weight: 600;
+    font-family: inherit;
+    text-decoration: none;
+    cursor: pointer;
+    letter-spacing: 0.04em;
+    transition: background 0.15s, transform 0.15s;
+    margin-top: var(--space-s);
+}
+
+.btn-new-form:hover {
+    background: var(--accent-secondary);
+    transform: translateY(-1px);
+}
diff --git a/app/public/partage/index.php b/app/public/partage/index.php
index d35c6fb..3afc3f6 100644
--- a/app/public/partage/index.php
+++ b/app/public/partage/index.php
@@ -95,41 +95,10 @@ function renderShareLinkError(string $title, string $message): void
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title><?= $pageTitle ?></title>
-        <link rel="stylesheet" href="<?= App::assetV('/assets/css/system.css') ?>">
-        <style>
-            .share-error {
-                max-width: 500px;
-                margin: 5rem auto;
-                padding: 2.5rem;
-                text-align: center;
-                background: #fff;
-                border: 2px solid #d00;
-                border-radius: 8px;
-            }
-            .share-error h1 {
-                color: #d00;
-                font-size: 1.5rem;
-                margin-bottom: 1rem;
-            }
-            .share-error p {
-                font-size: 1.1rem;
-                color: #444;
-                margin-bottom: 1.5rem;
-            }
-            .share-error a {
-                display: inline-block;
-                padding: 0.6rem 1.5rem;
-                background: #333;
-                color: white;
-                text-decoration: none;
-                border-radius: 4px;
-            }
-            .share-error a:hover {
-                background: #555;
-            }
-        </style>
+        <link rel="stylesheet" href="<?= App::assetV('/assets/css/common.css') ?>">
+        <link rel="stylesheet" href="<?= App::assetV('/assets/css/form.css') ?>">
     </head>
-    <body>
+    <body class="student-body">
         <div class="share-error">
             <h1><?= $pageTitle ?></h1>
             <p><?= htmlspecialchars($message) ?></p>
@@ -172,33 +141,10 @@ function requirePasswordGate(array $link, string $slug): void
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title><?= htmlspecialchars($pageTitle) ?></title>
-        <link rel="stylesheet" href="<?= App::assetV('/assets/css/system.css') ?>">
-        <style>
-            .password-gate {
-                max-width: 400px;
-                margin: 4rem auto;
-                padding: 2rem;
-                text-align: center;
-            }
-            .password-gate h1 { margin-bottom: 1.5rem; }
-            .password-gate input[type="password"] {
-                width: 100%;
-                padding: 0.5rem;
-                margin: 0.5rem 0 1rem;
-                font-size: 1rem;
-            }
-            .password-gate button {
-                padding: 0.75rem 2rem;
-                font-size: 1rem;
-                cursor: pointer;
-            }
-            .password-error {
-                color: red;
-                margin-bottom: 1rem;
-            }
-        </style>
+        <link rel="stylesheet" href="<?= App::assetV('/assets/css/common.css') ?>">
+        <link rel="stylesheet" href="<?= App::assetV('/assets/css/form.css') ?>">
     </head>
-    <body>
+    <body class="student-body">
         <div class="password-gate">
             <h1>🔒 Accès protégé</h1>
             <?php if ($flashError): ?>
@@ -251,9 +197,9 @@ function renderShareLinkForm(string $slug, array $link): void
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title><?= htmlspecialchars($pageTitle) ?></title>
         <link rel="stylesheet" href="<?= App::assetV('/assets/css/common.css') ?>">
-        <link rel="stylesheet" href="<?= App::assetV('/assets/css/admin.css') ?>">
+        <link rel="stylesheet" href="<?= App::assetV('/assets/css/form.css') ?>">
     </head>
-    <body class="admin-body student-body">
+    <body class="student-body">
         <main id="main-content">
             <div class="thesis-add-header">
                 <h1>Soumettre un TFE</h1>
diff --git a/app/public/partage/thanks.php b/app/public/partage/thanks.php
index f18636a..4f6f89e 100644
--- a/app/public/partage/thanks.php
+++ b/app/public/partage/thanks.php
@@ -38,69 +38,24 @@ $pageTitle = 'Merci — TFE enregistré';
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title><?= htmlspecialchars($pageTitle) ?></title>
-    <link rel="stylesheet" href="<?= App::assetV('/assets/css/system.css') ?>">
-    <style>
-        .thanks-center {
-            max-width: 600px;
-            margin: 4rem auto;
-            padding: 2rem;
-            text-align: center;
-        }
-        .thanks-center h1 {
-            margin-bottom: 0.5rem;
-            font-size: 2rem;
-        }
-        .thanks-center p {
-            font-size: 1.1rem;
-            color: #555;
-            margin: 1rem 0 2rem;
-        }
-        .thanks-center .thesis-title {
-            font-weight: bold;
-            font-size: 1.2rem;
-            color: #333;
-            margin-bottom: 2rem;
-        }
-        .thanks-center .btn-add-another {
-            display: inline-block;
-            padding: 0.75rem 2rem;
-            background: #333;
-            color: white;
-            text-decoration: none;
-            border-radius: 4px;
-            font-size: 1rem;
-            transition: background 0.2s;
-        }
-        .thanks-center .btn-add-another:hover {
-            background: #555;
-        }
-        .email-sent-notice {
-            display: inline-block;
-            padding: 0.75rem 1.5rem;
-            background: #e8f5e9;
-            border: 1px solid #a5d6a7;
-            border-radius: 6px;
-            font-size: 0.95rem;
-            color: #2e7d32;
-            margin: 0 0 1.5rem;
-        }
-    </style>
+    <link rel="stylesheet" href="<?= App::assetV('/assets/css/common.css') ?>">
+    <link rel="stylesheet" href="<?= App::assetV('/assets/css/form.css') ?>">
 </head>
-<body>
-    <div class="thanks-center">
-        <h1>✅ Merci !</h1>
-        <p>Votre TFE a bien été enregistré sur la plateforme.</p>
-        <?php if ($emailSent): ?>
-        <div class="email-sent-notice">
-            📧 Un e-mail de confirmation a été envoyé avec un récapitulatif de votre soumission.
+<body class="student-body">
+    <main id="main-content" class="thanks-student-page">
+        <div class="thanks-success">
+            <h1>✅ Merci !</h1>
+            <p class="thanks-message">Votre TFE a bien été enregistré sur la plateforme.</p>
+            <?php if ($emailSent): ?>
+            <p class="flash-success">📧 Un e-mail de confirmation a été envoyé avec un récapitulatif de votre soumission.</p>
+            <?php endif; ?>
+            <?php if ($thesis): ?>
+            <p><strong><?= htmlspecialchars($thesis['title']) ?></strong><?php if (!empty($thesis['authors'])): ?> — <?= htmlspecialchars($thesis['authors']) ?><?php endif; ?></p>
+            <?php endif; ?>
+            <?php if ($slug): ?>
+            <a href="/partage/<?= urlencode($slug) ?>" class="btn-new-form">+ Soumettre un autre TFE</a>
+            <?php endif; ?>
         </div>
-        <?php endif; ?>
-        <?php if ($thesis): ?>
-        <div class="thesis-title"><?= htmlspecialchars($thesis['title']) ?> — <?= htmlspecialchars($thesis['authors'] ?? '') ?></div>
-        <?php endif; ?>
-        <?php if ($slug): ?>
-        <a href="/partage/<?= urlencode($slug) ?>" class="btn-add-another">+ Soumettre un autre TFE</a>
-        <?php endif; ?>
-    </div>
+    </main>
 </body>
 </html>