feat: roles, permissions, grille full-width, SSO display name

- Admin/roles : tableau des roles avec edition par role (/admin/role/<nom>)
- Permissions par role : cases a cocher groupees (Articles, Acces & lecture)
- Nouvelles capacites : propose/validate/publish articles (own/all), view_previews
- Nom technique auto-genere depuis le label (JS + fallback serveur)
- Blocage suppression du dernier administrateur
- user_capabilities table ajoutee en DB
- Navbar : dropdown unique (nom + Mon identite + Administration + Deconnexion)
- SSO callback : preserve le nom personnalise, ne l ecrase plus a la connexion
- Grille articles : CSS Grid auto-fill full-width, hauteur uniforme par ligne
- CSP : add_files.js et post_confirm.js externalises

public/assets/js/app.js

@@ -50,6 +50,25 @@ document.addEventListener('DOMContentLoaded', function () {
                 .replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
     }
 
+    // ─── Rôle : nom technique auto depuis le label ───────────────────────────
+    var roleLabelInput = document.getElementById('role-label');
+    var roleNameInput  = document.getElementById('role-name');
+    if (roleLabelInput && roleNameInput) {
+        roleLabelInput.addEventListener('input', function () {
+            if (roleNameInput._manual) return;
+            roleNameInput.value = slugify(this.value);
+        });
+        roleNameInput.addEventListener('input', function () {
+            this._manual = (this.value !== '');
+        });
+        roleNameInput.addEventListener('blur', function () {
+            if (this.value === '') {
+                this._manual = false;
+                this.value = slugify(roleLabelInput.value);
+            }
+        });
+    }
+
     // ─── Aperçu couleur catégorie ────────────────────────────────────────────
     const KNOWN_CATS = {
         'actualité': 10, 'travaux': 35, 'scolaire': 55,