Ajout des écoles + changement CSS

Refonte du design : moderne + responsive, thème clair/sombre, maj compétences
- Vraie structure HTML5 (doctype, head, meta viewport) via le header commun - CSS réécrit avec variables, police Inter, header sticky, menu burger mobile - Thème clair/sombre avec bouton dans la navbar (mémorisé en localStorage) - Hero sur l'accueil, page compétences en cartes alignée sur le CV (+ Ansible) - Correction des balises body/main dupliquées sur contact, login et cgu Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-02 10:20:47 +02:00 · 2026-07-02 09:24:33 +02:00
24 changed files with 1955 additions and 444 deletions
@@ -329,6 +329,9 @@ $attemptsLeft = $round['attempts_left'] ?? 0;
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test anti-robot</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./styles/captcha.css">
 </head>
 <body class="<?php echo $success ? 'success-mode' : ''; ?>">
@@ -58,3 +58,51 @@ ALTER TABLE projects
 ADD COLUMN status VARCHAR(100) NULL AFTER title;
 ALTER TABLE experiences
 ADD COLUMN status VARCHAR(100) NULL AFTER title;
 -- Table de réglages du site (clé / valeur) : utilisée pour la notification de la page d'accueil
 CREATE TABLE IF NOT EXISTS settings (
    name  VARCHAR(50)  NOT NULL,
    value TEXT         NULL,
    PRIMARY KEY (name)
 );
 -- Valeurs par défaut de la notification (modifiables ensuite depuis le panel Admin)
 INSERT INTO settings (name, value) VALUES
 ('site_notice_title', 'Des bugs peuvent encore se produire.'),
 ('site_notice_text', 'Si le CSS ou les images s''affichent mal, pensez à vider le cache de votre navigateur (Ctrl + F5 ou Cmd + Shift + R) pour voir les dernières modifications.'),
 ('site_notice_enabled', '1')
 ON DUPLICATE KEY UPDATE value = VALUES(value);
 -- Table des compétences : une ligne = une catégorie (carte sur la page Compétences)
 -- items : un item par ligne, au format "classes-icone-fontawesome|Texte" (l'icône est optionnelle : "Texte" seul fonctionne aussi)
 CREATE TABLE IF NOT EXISTS skills (
    id         INT UNSIGNED NOT NULL AUTO_INCREMENT,
    title      VARCHAR(100) NOT NULL,
    icon       VARCHAR(100) NULL,
    items      TEXT         NOT NULL,
    position   INT          NOT NULL DEFAULT 0,
    created_at DATETIME     DEFAULT CURRENT_TIMESTAMP,
    PRIMARY KEY (id)
 );
 -- Compétences actuelles (reprises du CV)
 INSERT INTO skills (title, icon, items, position) VALUES
 ('Systèmes d''exploitation', 'fa-solid fa-computer', 'fa-brands fa-microsoft|Windows (Serveur/XP/8/10/11)\nfa-brands fa-linux|Linux (Debian/Ubuntu)\nfa-brands fa-apple|macOS', 1),
 ('Réseaux', 'fa-solid fa-network-wired', 'fa-solid fa-location-dot|Adressage IP\nfa-solid fa-diagram-project|VLAN\nfa-solid fa-shield-halved|Pare-feu (iptables/ufw)\nfa-solid fa-globe|DNS (Bind9)\nfa-solid fa-server|DHCP (ISC DHCP)\nfa-solid fa-arrows-left-right|Proxy (Squid)', 2),
 ('Scripting', 'fa-solid fa-terminal', 'fa-solid fa-terminal|Bash\nfa-brands fa-python|Python\nfa-brands fa-java|Java\nfa-solid fa-gears|Ansible', 3),
 ('Applications', 'fa-solid fa-cubes', 'fa-solid fa-address-book|LDAP (Windows AD)\nfa-solid fa-headset|GLPI\nfa-solid fa-compact-disc|FOG\nfa-solid fa-server|Nginx / Apache\nfa-brands fa-docker|Docker\nfa-solid fa-display|Guacamole\nfa-solid fa-database|MySQL / MariaDB', 4),
 ('Développement web', 'fa-solid fa-code', 'fa-brands fa-html5|HTML\nfa-brands fa-css3-alt|CSS\nfa-brands fa-js|JavaScript\nfa-brands fa-php|PHP', 5),
 ('Virtualisation & Outils', 'fa-solid fa-layer-group', 'fa-solid fa-server|Proxmox\nfa-solid fa-box|VirtualBox\nfa-brands fa-git-alt|Git (GitHub, Gitea)', 6);
 -- Table des écoles / formations : affichée sous les expériences professionnelles sur la page Expériences
 CREATE TABLE IF NOT EXISTS schools (
    id          INT UNSIGNED NOT NULL AUTO_INCREMENT,
    title       VARCHAR(100) NOT NULL,
    status      VARCHAR(100) NULL,
    tags        VARCHAR(255) NULL,
    description TEXT         NOT NULL,
    duration    VARCHAR(100) NOT NULL,
    image_url   VARCHAR(255) NOT NULL,
    created_at  DATETIME     DEFAULT CURRENT_TIMESTAMP,
    PRIMARY KEY (id)
 );
@@ -19,3 +19,38 @@
        </div>
    </div>
 </footer>
 <!-- Apparition des cartes au défilement (IntersectionObserver) -->
 <script>
 (function () {
    // On respecte la préférence "réduire les animations" du système
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    if (!('IntersectionObserver' in window)) return;
    // Éléments qui apparaissent en glissant vers le haut quand ils entrent dans l'écran
    var cibles = document.querySelectorAll(
        '.project-card, .quick-link-card, .skill-category, .contact-card, ' +
        '.login-card, .project-form-card, .cgu-card, ' +
        '.page-header, .quick-links-header, .skills-header, .projects-title'
    );
    var observer = new IntersectionObserver(function (entries) {
        entries.forEach(function (entry) {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
                observer.unobserve(entry.target);
            }
        });
    }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
    cibles.forEach(function (el, i) {
        el.classList.add('reveal');
        // Petit décalage en cascade pour les éléments d'une même grille
        el.style.setProperty('--reveal-delay', ((i % 4) * 0.08) + 's');
        observer.observe(el);
    });
 })();
 </script>
 </body>
 </html>
@@ -13,25 +13,56 @@ require_once('../scripts/requireCaptcha.php');
 // Ajout des logs sur toutes les pages
 require_once('../functions/sendLogs.php');
 ?>
-<!-- Ajout du CSS Primaire (fait par IA) -->
+// Titre de la page : chaque page peut définir $pageTitle avant d'inclure le header
-<link rel="stylesheet" href="../styles/primary_css.css">
+$pageTitle = isset($pageTitle) ? $pageTitle . ' — Esteban MOUSSU' : 'Esteban MOUSSU — Portfolio';
-<!-- Ajout de Font Awesome pour les icones de home.php-->
+
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
+// Page courante pour souligner le lien actif dans la navigation
 $currentPage = basename($_SERVER['PHP_SELF']);
 ?>
 <!DOCTYPE html>
 <html lang="fr">
 <head>
    <meta charset="UTF-8">
    <!-- Meta viewport : indispensable pour que le site soit responsive sur mobile -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo htmlspecialchars($pageTitle); ?></title>
    <!-- Applique le thème sauvegardé AVANT le chargement du CSS pour éviter un flash sombre/clair -->
    <script>
        (function () {
            if (localStorage.getItem('theme') === 'light') {
                document.documentElement.setAttribute('data-theme', 'light');
            }
        })();
    </script>
    <!-- Police moderne Inter (Google Fonts) -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <!-- Ajout du CSS Primaire (fait par IA) -->
    <link rel="stylesheet" href="../styles/primary_css.css">
    <!-- Ajout de Font Awesome pour les icones de home.php-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
 </head>
 <body>
 <!-- Header + nav -->
-<header>
+<header class="site-header">
    <!-- Texte qui sera dans le header -->
    <a href="./../index.php" class="titre-de-page">Esteban MOUSSU - PortFolio</a>
    <div class="header-right">
    <!-- Module de navigation -->
-    <nav>
+    <nav class="site-nav">
-    <a href="./../index.php">Accueil</a>
+    <a href="./../pages/home.php" class="<?php echo ($currentPage === 'home.php') ? 'active' : ''; ?>">Accueil</a>
-    <a href="./../pages/projects.php">Projets</a>
+    <a href="./../pages/projects.php" class="<?php echo ($currentPage === 'projects.php') ? 'active' : ''; ?>">Projets</a>
-    <a href="./../pages/xp.php">Expériences</a>
+    <a href="./../pages/xp.php" class="<?php echo ($currentPage === 'xp.php') ? 'active' : ''; ?>">Expériences</a>
-    <a href="./../pages/skills.php">Compétences</a>
+    <a href="./../pages/skills.php" class="<?php echo ($currentPage === 'skills.php') ? 'active' : ''; ?>">Compétences</a>
-    <a href="./../pages/contact.php">Contact</a>
+    <a href="./../pages/contact.php" class="<?php echo ($currentPage === 'contact.php') ? 'active' : ''; ?>">Contact</a>
    <?php
    // Vérification que l'utilisateur est admin, s'il est admin, il aura accès au panel admin
    if (!isset($_SESSION['role']) || $_SESSION['role'] !== 'admin') {
@@ -40,7 +71,7 @@ require_once('../functions/sendLogs.php');
    ?>
    <!-- Lien vers le panneau admin -->
-    <a href="./../pages/admin.php">Administration</a>
+    <a href="./../pages/admin.php" class="<?php echo ($currentPage === 'admin.php') ? 'active' : ''; ?>">Administration</a>
    <?php
    }
@@ -51,18 +82,31 @@ require_once('../functions/sendLogs.php');
    if (isset($_SESSION['user_id'])){
    ?>
-    <a href="../scripts/disconnect.php">Deconnexion</a>
+    <a href="../scripts/disconnect.php" class="nav-cta">Deconnexion</a>
    <?php
    } else {
        ?>
-    <a href="./../pages/login.php">Connexion</a>
+    <a href="./../pages/login.php" class="nav-cta <?php echo ($currentPage === 'login.php') ? 'active' : ''; ?>">Connexion</a>
    <?php
    }
    ?>
    <!-- Fonctionnalité future changement de thème dark / light et panneau admin -->
    </nav>
    <!-- Bouton de changement de thème dark / light : le choix est mémorisé dans le navigateur (localStorage) -->
    <button class="theme-toggle" aria-label="Changer de thème"
        onclick="var h=document.documentElement;var l=h.getAttribute('data-theme')==='light';if(l){h.removeAttribute('data-theme');localStorage.setItem('theme','dark');}else{h.setAttribute('data-theme','light');localStorage.setItem('theme','light');}">
        <i class="fa-solid fa-sun"></i><i class="fa-solid fa-moon"></i>
    </button>
    <!-- Bouton burger : visible uniquement sur mobile, ouvre/ferme la navigation -->
    <button class="nav-toggle" aria-label="Ouvrir le menu" aria-expanded="false"
        onclick="var h=document.querySelector('.site-header');h.classList.toggle('nav-open');this.setAttribute('aria-expanded',h.classList.contains('nav-open'));">
        <span></span><span></span><span></span>
    </button>
    </div>
 </header>
 <main>
@@ -0,0 +1,116 @@
 <?php
 // Ajout de connexion a la bdd
 require_once('../functions/databaseConnection.php');
 // Fonction qui va faire une requête SQL afin de collecter toutes les écoles / formations
 // Retourne un tableau vide si la table n'existe pas encore (pas de die() pour que la page
 // Expériences continue de fonctionner tant que le script SQL n'a pas été exécuté)
 function listeEcoles() {
    global $dbh;
    try {
        $stmt = $dbh->prepare('SELECT id, title, status, tags, description, duration, image_url FROM schools ORDER BY id DESC');
        $stmt->execute();
        return $stmt->fetchAll(PDO::FETCH_ASSOC);
    } catch (PDOException $e) {
        return [];
    }
 }
 // Fonction qui permet de récupérer une école par id (pour la modification dans le panel Admin)
 function recupererEcoleParId($id) {
    global $dbh;
    try {
        $stmt = $dbh->prepare('SELECT id, title, status, tags, description, duration, image_url FROM schools WHERE id = :id');
        $stmt->bindValue(':id', $id, PDO::PARAM_INT);
        $stmt->execute();
        return $stmt->fetch(PDO::FETCH_ASSOC);
    } catch (PDOException $e) {
        return false;
    }
 }
 // Fonction interne qui affiche une carte école (utilisée par la page publique et le panel admin)
 function afficherEcoleCard($ecole, $admin = false) {
    $id = (int) $ecole['id'];
    $titre = htmlspecialchars($ecole['title']);
    $description = nl2br(htmlspecialchars($ecole['description']));
    $duration = htmlspecialchars($ecole['duration']);
    $image = htmlspecialchars($ecole['image_url']);
    $status = htmlspecialchars($ecole['status'] ?? '');
    $tags = [];
    // S'il y a des tags alors on les sépares grâce à la virgule (tags1,tags2,etc...)
    if (!empty($ecole['tags'])) {
        $tags = array_filter(array_map('trim', explode(',', $ecole['tags'])));
    }
    echo '<article class="project-card">';
    // Si la donnée avec l'image n'est pas null alors on l'affiche
    if (!empty($image)) {
        echo '<div class="project-banner">';
        echo '<img src="' . $image . '" alt="Image de l ecole ' . $titre . '">';
        if (!empty($status)) {
            echo '<div class="project-state">' . $status . '</div>';
        }
        echo '</div>';
    }
    echo '<div class="project-content">';
    echo '<h2>' . $titre . '</h2>';
    echo '<p><strong>Période :</strong> ' . $duration . '</p>';
    if (!empty($tags)) {
        echo '<div class="project-tags">';
        foreach ($tags as $tag) {
            echo '<span class="tag">' . htmlspecialchars($tag) . '</span>';
        }
        echo '</div>';
    }
    echo '<p>' . $description . '</p>';
    // Boutons de modification / suppression pour le panel admin
    if ($admin) {
        echo '<div class="admin-actions">';
        echo '<a class="btn-submit btn-edit" href="./admin.php?edit_school=' . $id . '">Modifier</a>';
        echo '<a class="btn-submit btn-delete" href="../scripts/removeSchool.php?id=' . $id . '" onclick="return confirm(\'Voulez-vous vraiment supprimer cette école ?\');">Supprimer</a>';
        echo '</div>';
    }
    echo '</div>';
    echo '</article>';
 }
 // Fonction qui va afficher les écoles sur la page publique
 function afficherEcoles() {
    $ecoles = listeEcoles();
    // Si la table est vide ou n'existe pas encore on n'affiche rien
    if (empty($ecoles)) {
        return;
    }
    echo '<div class="projects-list">';
    foreach ($ecoles as $ecole) {
        afficherEcoleCard($ecole, false);
    }
    echo '</div>';
 }
 // Fonction identique à celle en haut mais ajout de boutons pour le panel admin
 function afficherEcolesAdmin() {
    $ecoles = listeEcoles();
    echo '<div class="projects-list">';
    foreach ($ecoles as $ecole) {
        afficherEcoleCard($ecole, true);
    }
    echo '</div>';
 }
@@ -0,0 +1,48 @@
 <?php
 // Ajout de connexion a la bdd
 require_once('../functions/databaseConnection.php');
 // Fonction qui récupère un réglage dans la table settings (clé / valeur)
 // Retourne null si le réglage n'existe pas OU si la table n'a pas encore été créée :
 // contrairement aux autres fonctions on ne fait pas de die() ici pour que le site
 // continue de fonctionner tant que le script SQL n'a pas été exécuté
 function recupererSetting($name) {
    global $dbh;
    try {
        $stmt = $dbh->prepare('SELECT value FROM settings WHERE name = :name');
        $stmt->bindValue(':name', $name, PDO::PARAM_STR);
        $stmt->execute();
        $row = $stmt->fetch(PDO::FETCH_ASSOC);
        return $row ? $row['value'] : null;
    } catch (PDOException $e) {
        return null;
    }
 }
 // Fonction qui affiche la notification de la page d'accueil (si elle est activée)
 function afficherNotice() {
    $enabled = recupererSetting('site_notice_enabled');
    $titre = recupererSetting('site_notice_title');
    $texte = recupererSetting('site_notice_text');
    // Valeurs par défaut tant que la table settings n'existe pas encore
    if ($titre === null && $texte === null) {
        $enabled = '1';
        $titre = 'Des bugs peuvent encore se produire.';
        $texte = "Si le CSS ou les images s'affichent mal, pensez à vider le cache de votre navigateur (Ctrl + F5 ou Cmd + Shift + R) pour voir les dernières modifications.";
    }
    // Si la notification est désactivée ou vide on n'affiche rien
    if ($enabled !== '1' || (empty($titre) && empty($texte))) {
        return;
    }
    echo '<p class="dev-cache-notice">';
    if (!empty($titre)) {
        echo '<strong>' . htmlspecialchars($titre) . '</strong> ';
    }
    echo nl2br(htmlspecialchars($texte));
    echo '</p>';
 }
@@ -0,0 +1,98 @@
 <?php
 // Ajout de connexion a la bdd
 require_once('../functions/databaseConnection.php');
 // Fonction qui va faire une requête SQL afin de collecter toutes les catégories de compétences
 // Retourne un tableau vide si la table n'existe pas encore (pas de die() pour que la page
 // Compétences continue de fonctionner tant que le script SQL n'a pas été exécuté)
 function listeSkills() {
    global $dbh;
    try {
        $stmt = $dbh->prepare('SELECT id, title, icon, items, position FROM skills ORDER BY position ASC, id ASC');
        $stmt->execute();
        return $stmt->fetchAll(PDO::FETCH_ASSOC);
    } catch (PDOException $e) {
        return [];
    }
 }
 // Fonction qui permet de récupérer une catégorie de compétences par id (pour la modification dans le panel Admin)
 function recupererSkillParId($id) {
    global $dbh;
    try {
        $stmt = $dbh->prepare('SELECT id, title, icon, items, position FROM skills WHERE id = :id');
        $stmt->bindValue(':id', $id, PDO::PARAM_INT);
        $stmt->execute();
        return $stmt->fetch(PDO::FETCH_ASSOC);
    } catch (PDOException $e) {
        return false;
    }
 }
 // Fonction interne qui affiche une carte de compétences (utilisée par la page publique et le panel admin)
 // Les items sont stockés un par ligne, au format "classes-icone|Texte" (icône optionnelle)
 function afficherSkillCard($skill, $admin = false) {
    $id = (int) $skill['id'];
    $titre = htmlspecialchars($skill['title']);
    $icone = htmlspecialchars(!empty($skill['icon']) ? $skill['icon'] : 'fa-solid fa-star');
    echo '<div class="skill-category">';
    echo '<div class="skill-category-icon"><i class="' . $icone . '"></i></div>';
    echo '<h2>' . $titre . '</h2>';
    echo '<ul class="skill-list">';
    // Un item par ligne
    $items = array_filter(array_map('trim', preg_split('/\r\n|\r|\n/', $skill['items'])));
    foreach ($items as $item) {
        // Icône optionnelle avant le | sinon icône par défaut
        $itemIcone = 'fa-solid fa-check';
        $label = $item;
        if (strpos($item, '|') !== false) {
            list($itemIcone, $label) = array_map('trim', explode('|', $item, 2));
        }
        echo '<li><i class="' . htmlspecialchars($itemIcone) . '"></i> ' . htmlspecialchars($label) . '</li>';
    }
    echo '</ul>';
    // Boutons de modification / suppression pour le panel admin
    if ($admin) {
        echo '<div class="admin-actions">';
        echo '<a class="btn-submit btn-edit" href="./admin.php?edit_skill=' . $id . '">Modifier</a>';
        echo '<a class="btn-submit btn-delete" href="../scripts/removeSkill.php?id=' . $id . '" onclick="return confirm(\'Voulez-vous vraiment supprimer cette catégorie de compétences ?\');">Supprimer</a>';
        echo '</div>';
    }
    echo '</div>';
 }
 // Fonction qui va afficher les compétences sur la page publique
 function afficherSkills() {
    $skills = listeSkills();
    // Si la table est vide ou n'existe pas encore
    if (empty($skills)) {
        echo '<p class="admin-notice">Les compétences seront bientôt disponibles.</p>';
        return;
    }
    echo '<div class="skills-grid">';
    foreach ($skills as $skill) {
        afficherSkillCard($skill, false);
    }
    echo '</div>';
 }
 // Fonction identique à celle en haut mais ajout de boutons pour le panel admin
 function afficherSkillsAdmin() {
    $skills = listeSkills();
    echo '<div class="skills-grid">';
    foreach ($skills as $skill) {
        afficherSkillCard($skill, true);
    }
    echo '</div>';
 }
@@ -1,4 +1,7 @@
 <?php
 // Titre de l'onglet
 $pageTitle = 'Administration';
 // On ajoute ici le header
 require_once('./../elements/header.php');
@@ -7,6 +10,9 @@ require_once '../functions/databaseConnection.php';
 require_once("../functions/listUser.php");
 require_once('../functions/listProject.php');
 require_once('../functions/listXP.php');
 require_once('../functions/listSchool.php');
 require_once('../functions/listSkills.php');
 require_once('../functions/listSettings.php');
 // L'utilisateur doit être administrateur
@@ -18,15 +24,28 @@ if (!isset($_SESSION['role']) || $_SESSION['role'] !== 'admin') {
 // On met les variables à null ici pour éviter qu'il garde les options en premier chargement
 $projetAModifier = null;
 $xpAModifier = null;
 $ecoleAModifier = null;
 $skillAModifier = null;
-// Si on modifie XP ou Projets
+// Si on modifie XP, Projets, École ou Compétence
 if (isset($_GET['edit_project']) && is_numeric($_GET['edit_project'])) {
    $projetAModifier = recupererProjetParId((int) $_GET['edit_project']);
 }
 if (isset($_GET['edit_xp']) && is_numeric($_GET['edit_xp'])) {
    $xpAModifier = recupererXPParId((int) $_GET['edit_xp']);
 }
 if (isset($_GET['edit_school']) && is_numeric($_GET['edit_school'])) {
    $ecoleAModifier = recupererEcoleParId((int) $_GET['edit_school']);
 }
 if (isset($_GET['edit_skill']) && is_numeric($_GET['edit_skill'])) {
    $skillAModifier = recupererSkillParId((int) $_GET['edit_skill']);
 }
 // Valeurs actuelles de la notification de la page d'accueil
 $noticeTitle = recupererSetting('site_notice_title') ?? '';
 $noticeText = recupererSetting('site_notice_text') ?? '';
 $noticeEnabled = recupererSetting('site_notice_enabled') ?? '1';
 // Page du panneau d'administration
 ?>
@@ -105,6 +124,104 @@ if (isset($_GET['edit_xp']) && is_numeric($_GET['edit_xp'])) {
        </div>
    </div>
    <!-- Formulaire de création d'école / formation -->
    <div class="project-container">
        <div class="project-form-card">
            <div class="project-header">
                <h2><?php echo $ecoleAModifier ? 'Modifier l\'école' : 'Nouvelle école'; ?></h2>
            </div>
            <!-- on envoie les données à addSchool.php -->
            <form method="POST" action="<?php echo $ecoleAModifier ? '../scripts/updateSchool.php' : '../scripts/addSchool.php'; ?>">
            <?php if ($ecoleAModifier): ?>
                <input type="hidden" name="id" value="<?php echo (int) $ecoleAModifier['id']; ?>">
            <?php endif; ?>
                <label>Nom de l'école *</label>
                <input type="text" name="title" required value="<?php echo $ecoleAModifier ? htmlspecialchars($ecoleAModifier['title']) : ''; ?>">
                <label>Tags (virgules)</label>
                <input type="text" name="tags" value="<?php echo $ecoleAModifier ? htmlspecialchars($ecoleAModifier['tags']) : ''; ?>">
                <label>Description (diplôme, spécialité...) *</label>
                <textarea name="description" required><?php echo $ecoleAModifier ? htmlspecialchars($ecoleAModifier['description']) : ''; ?></textarea>
                <label>Période (ex : 2023 - 2025) *</label>
                <input type="text" name="duration" required value="<?php echo $ecoleAModifier ? htmlspecialchars($ecoleAModifier['duration']) : ''; ?>">
                <label>Lien de l'image *</label>
                <input type="url" name="imageurl" placeholder="https://..." required value="<?php echo $ecoleAModifier ? htmlspecialchars($ecoleAModifier['image_url']) : ''; ?>">
                <input type="submit" name="submitschool" value="<?php echo $ecoleAModifier ? 'Modifier l\'école' : '+ Ajouter l\'école'; ?>" class="btn-submit">
            </form>
        </div>
    </div>
    <!-- Formulaire de création de catégorie de compétences -->
    <div class="project-container">
        <div class="project-form-card">
            <div class="project-header">
                <h2><?php echo $skillAModifier ? 'Modifier la compétence' : 'Nouvelle compétence'; ?></h2>
            </div>
            <!-- on envoie les données à addSkill.php -->
            <form method="POST" action="<?php echo $skillAModifier ? '../scripts/updateSkill.php' : '../scripts/addSkill.php'; ?>">
            <?php if ($skillAModifier): ?>
                <input type="hidden" name="id" value="<?php echo (int) $skillAModifier['id']; ?>">
            <?php endif; ?>
                <label>Titre de la catégorie *</label>
                <input type="text" name="title" required value="<?php echo $skillAModifier ? htmlspecialchars($skillAModifier['title']) : ''; ?>">
                <label>Icône de la catégorie (classes Font Awesome, ex : fa-solid fa-terminal)</label>
                <input type="text" name="icon" placeholder="fa-solid fa-star" value="<?php echo $skillAModifier ? htmlspecialchars($skillAModifier['icon']) : ''; ?>">
                <label>Compétences (une par ligne, format : "icone|texte" ou juste "texte") *</label>
                <textarea name="items" placeholder="fa-brands fa-python|Python&#10;fa-solid fa-terminal|Bash&#10;Ansible" required><?php echo $skillAModifier ? htmlspecialchars($skillAModifier['items']) : ''; ?></textarea>
                <label>Position (ordre d'affichage, du plus petit au plus grand)</label>
                <input type="text" name="position" value="<?php echo $skillAModifier ? (int) $skillAModifier['position'] : '0'; ?>">
                <input type="submit" name="submitskill" value="<?php echo $skillAModifier ? 'Modifier la compétence' : '+ Ajouter la compétence'; ?>" class="btn-submit">
            </form>
        </div>
    </div>
    <!-- Formulaire de la notification de la page d'accueil -->
    <div class="project-container">
        <div class="project-form-card">
            <div class="project-header">
                <h2>Notification de la page d'accueil</h2>
            </div>
            <!-- on envoie les données à updateSettings.php -->
            <form method="POST" action="../scripts/updateSettings.php">
                <label>Titre (affiché en gras)</label>
                <input type="text" name="notice_title" value="<?php echo htmlspecialchars($noticeTitle); ?>">
                <label>Texte</label>
                <textarea name="notice_text"><?php echo htmlspecialchars($noticeText); ?></textarea>
                <!-- Checkbox pour activer / désactiver la notification sans la supprimer -->
                <label class="checkbox-row">
                    <input type="checkbox" name="notice_enabled" value="1" <?php echo $noticeEnabled === '1' ? 'checked' : ''; ?>>
                    Afficher la notification sur la page d'accueil
                </label>
                <input type="submit" name="submitsettings" value="Enregistrer la notification" class="btn-submit">
            </form>
        </div>
    </div>
 </div>
 <?php
@@ -113,7 +230,14 @@ if (isset($_GET['edit_xp']) && is_numeric($_GET['edit_xp'])) {
 <h2 class="projects-title">Gérer les projets</h2>
 <?php afficherProjetsAdmin(); ?>
 <h2 class="projects-title">Gérer les experiences</h2>
-<?php afficherXPAdmin();
+<?php afficherXPAdmin(); ?>
 <h2 class="projects-title">Gérer les écoles</h2>
 <?php afficherEcolesAdmin(); ?>
 <h2 class="projects-title">Gérer les compétences</h2>
 <section class="skills-section skills-section-admin">
 <?php afficherSkillsAdmin(); ?>
 </section>
 <?php
 // Création de compte
 ?>
@@ -1,11 +1,15 @@
 <?php
 // CGU / CDU
 // Titre de l'onglet
 $pageTitle = 'Conditions générales d\'utilisation';
 require_once('./../elements/header.php');
 ?>
-<main class="cgu-page">
+<div class="cgu-page">
    <section class="cgu-card">
        <h1> Conditions générales d'utilisation </h1>
        <h2> Dernière mise à jour : 29 juin 2026</h2>
@@ -57,7 +61,7 @@ require_once('./../elements/header.php');
        <h3> 12. Droit applicable</h3>
        <p>Les présentes CGU sont soumises au droit français. En cas de litige, et à défaut de résolution amiable, les juridictions compétentes seront celles déterminées par les règles de droit commun.</p>
    </section>
-</main>
+</div>
 <?php
 require_once('../elements/footer.php');
@@ -1,18 +1,21 @@
 <?php
 // Formulaire de contact avec WEBHOOK Discord
 // Titre de l'onglet
 $pageTitle = 'Contact';
 // On ajoute ici le header
 require_once("../elements/header.php");
 ?>
-<body>
+<div class="contact-page">
    <main class="contact-page">
    <section class="contact-wrapper">
        <div class="contact-card">
            <div class="contact-info">
                <p class="contact-title">Contact</p>
                <p class="contact-name">Moussu Esteban</p>
-                    <p class="contact-line">esteban.moussu@ik.me</p>
+                <p class="contact-line"><i class="fa-solid fa-envelope"></i> esteban.moussu@ik.me</p>
-                    <p class="contact-line">20 Grande rue</p>
+                <p class="contact-line"><i class="fa-solid fa-location-dot"></i> 20 Grande rue</p>
                <p class="contact-line">52500 Broncourt</p>
            </div>
@@ -32,8 +35,7 @@ require_once("../elements/header.php");
            </form>
        </div>
    </section>
-    </main>
+</div>
 </body>
 <?php
 // Ajout du footer
@@ -3,21 +3,32 @@
 // Page Home PortFolio Esteban
 // Cette page servira de page d'accueil où nous pourrons y retrouver une redirection vers les différents projets, espace de connexion, form de contact, etc...
 // Titre de l'onglet
 $pageTitle = 'Accueil';
 // Insertion du header
 require_once('./../elements/header.php');
-// Ajout d'un texte pour rappeller aux utilisateurs de la démo de vider le cache si du CSS s'affiche mal
+// La notification est maintenant dynamique : modifiable depuis le panel Admin (table settings)
-
+require_once('../functions/listSettings.php');
 //Si du CSS / ou des images s'affichent mal, il faut penser à vider le cache, version de développement uniquement.
 // Affichage de la notification (si elle est activée dans le panel Admin)
 afficherNotice();
 ?>
-<!-- Message d'alerte pour les utilisateurs de la démo -->
+
-<p class="dev-cache-notice">
+<!-- Section hero : présentation rapide -->
-    <strong>Version de développement uniquement.</strong>
+<section class="hero">
-    Si le CSS ou les images s'affichent mal, pensez à vider le cache de votre navigateur
+    <span class="hero-badge"><i class="fa-solid fa-graduation-cap"></i> Étudiant en informatique</span>
-    (Ctrl + F5 ou Cmd + Shift + R) pour voir les dernières modifications.
+    <h1>Salut, moi c'est <span class="accent">Esteban</span></h1>
-</p>
+    <p>
        Passionné par les systèmes, les réseaux et le développement web.
        Découvre mes projets, mes expériences professionnelles et mes compétences.
    </p>
    <div class="hero-actions">
        <a href="../pages/projects.php" class="btn btn-primary"><i class="fa-solid fa-folder-open"></i> Voir mes projets</a>
        <a href="../pages/contact.php" class="btn btn-ghost"><i class="fa-solid fa-paper-plane"></i> Me contacter</a>
    </div>
 </section>
 <!-- Section d'exploration rapide -->
 <section class="quick-links-section">
@@ -50,7 +61,7 @@ require_once('./../elements/header.php');
            </div>
            <h3>Compétences</h3>
            <!-- Page où il y aura toutes mes compétences -->
-            <p>PAS ENCORE DEV</p>
+            <p>Systèmes, réseaux et développement.</p>
        </a>
        <a href="../pages/contact.php" class="quick-link-card">
@@ -3,7 +3,8 @@
 // Dans l'idée un champ pour un nom d'utilisateur, et un pour le mot de passe puis un bouton de connexion
 // Egalement permettre à l'utilisateur de faire retour en arrière s'il s'est trompé (croix ou header)
-
+// Titre de l'onglet
 $pageTitle = 'Connexion';
 // On ajoute ici le Header
 require_once('./../elements/header.php');
@@ -16,8 +17,6 @@ if (isset($_SESSION['user_id'])){
 ?>
 <body>
 <!-- CSS Login (fait par Intelligence Arti) -->
 <div class="login-container">
    <div class="login-card">
@@ -38,8 +37,6 @@ if (isset($_SESSION['user_id'])){
    </div>
 </div>
 </body>
 <?php
 // Ajout du footer
@@ -3,18 +3,23 @@
 // Page affichant les différents projets personnels / scolaires / professionnels
 // On pourrait également rajouter des tags comme "En cours" ou même "En reflexion"...
 // Titre de l'onglet
 $pageTitle = 'Projets';
 // On ajoute le header
 require_once('../elements/header.php');
 // Ajout d'un message indiquant si l'utilisateur est admin qu'il peut modifier ces projets
 if (isset($_SESSION['role']) && $_SESSION['role'] === 'admin') {
-    echo "<p style='color: white; text-align: center;'>Vous êtes administrateur, vous pouvez modifier les projets <a href='../pages/admin.php'>ici</a>.</p>";
+    echo "<p class='admin-notice'>Vous êtes administrateur, vous pouvez modifier les projets <a href='../pages/admin.php'>ici</a>.</p>";
 }
 // Affichages des projets
 ?>
-<p class="projects-title">Liste des projets</p>
+<div class="page-header">
    <h1>Projets</h1>
    <p>Mes réalisations personnelles, scolaires et professionnelles.</p>
 </div>
 <?php
@@ -1,50 +1,36 @@
 <?php
-// Compétences
+// Compétences : le contenu est maintenant dynamique, géré depuis le panel Admin (table skills)
 // Titre de l'onglet
 $pageTitle = 'Compétences';
 // On ajoute ici le header
 require_once('./../elements/header.php');
 // Ajout d'un message indiquant si l'utilisateur est admin qu'il peut modifier ces compétences
 if (isset($_SESSION['role']) && $_SESSION['role'] === 'admin') {
    echo "<p class='admin-notice'>Vous êtes administrateur, vous pouvez modifier les compétences <a href='../pages/admin.php'>ici</a>.</p>";
 }
 ?>
 <!-- Contenu de la page skills -->
 <section class="skills-section">
-<div class="container">
+    <div class="skills-header">
        <h1>Compétences</h1>
-</div>
+        <p>Un aperçu des technologies et des domaines que je maîtrise.</p>
-
+    </div>
 <h2><i class="fa-solid fa-computer"></i> Systèmes d'exploitation :</h2>
 <ul>
    <li><i class="fa-brands fa-microsoft"></i> Windows (Server/XP 8 10 11)</li>
    <li><i class="fa-brands fa-linux"></i> Linux</li>
    <li><i class="fa-brands fa-apple"></i> macOS</li>
 </ul>
 <h2>Réseaux :</h2>
 <ul>
    <li>Adressage IP</li>
    <li>VLAN</li>
    <li><i class="fa-brands fa-cloudflare"></i> Pare-feu</li>
    <li>DNS (Bind9)</li>
    <li>DHCP (ISC DHCP)</li>
    <li>Proxy (Proxy Squid)</li>
 </ul>
 <h2>Code :</h2>
 <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>PHP</li>
 </ul>
    <?php
    require_once('../functions/listSkills.php');
    // Appel de ma fonction dans Functions/listSkills.php
    afficherSkills();
    ?>
 </section>
 <?php
@@ -2,19 +2,24 @@
 // Page affichant les différentes expériences pro (stages etc...)
 // Titre de l'onglet
 $pageTitle = 'Expériences';
 // On ajoute le header
 require_once('../elements/header.php');
 // Ajout d'un message indiquant si l'utilisateur est admin qu'il peut modifier ces expériences
 if (isset($_SESSION['role']) && $_SESSION['role'] === 'admin') {
-    echo "<p style='color: white; text-align: center;'>Vous êtes administrateur, vous pouvez modifier les experiences <a href='../pages/admin.php'>ici</a>.</p>";
+    echo "<p class='admin-notice'>Vous êtes administrateur, vous pouvez modifier les experiences <a href='../pages/admin.php'>ici</a>.</p>";
 }
 // Affichages des xp pro
 ?>
-<p class="projects-title">Liste des expériences professionnelles</p>
+<div class="page-header">
    <h1>Expériences professionnelles</h1>
    <p>Mes stages et missions réalisées en entreprise.</p>
 </div>
 <?php
 require_once('../functions/listXP.php');
@@ -22,6 +27,22 @@ require_once('../functions/listXP.php');
 // Appel de ma fonction dans Functions/listXP.php
 afficherXP();
 require_once('../functions/listSchool.php');
 // Section écoles / formations, en dessous des expériences professionnelles
 // On n'affiche le titre que s'il y a au moins une école (table remplie)
 if (!empty(listeEcoles())) {
 ?>
 <div class="page-header">
    <h2>Mes écoles</h2>
    <p>Mon parcours scolaire et mes formations.</p>
 </div>
 <?php
    // Appel de ma fonction dans Functions/listSchool.php
    afficherEcoles();
 }
 // Ajout du footer
 require_once('../elements/footer.php'); ?>
@@ -0,0 +1,54 @@
 <?php
 session_start();
 require_once '../functions/databaseConnection.php';
 // Pour faire cette fonction l'utilisateur doit être administrateur
 if (!isset($_SESSION['role']) || $_SESSION['role'] !== 'admin') {
    header('Location: ../pages/home.php');
    exit;
 }
 // La requête doit être un POST sinon on l'a refuse
 if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Récupération des données dans la requete POST
    $title = trim($_POST['title'] ?? '');
    $tags = trim($_POST['tags'] ?? '');
    $description = trim($_POST['description'] ?? '');
    $duration = trim($_POST['duration'] ?? '');
    $image_url = trim($_POST['imageurl'] ?? '');
    // On vérifie que les champs obligatoires ne sont pas vide
    if (!empty($title) && !empty($description) && !empty($duration) && !empty($image_url)) {
        try {
            // On prépare la requête SQL pour insérer la nouvelle école
            $stmt = $dbh->prepare('INSERT INTO schools (title, tags, description, duration, image_url) VALUES (:title, :tags, :description, :duration, :image_url)');
            // On execute la requete préparée
            $stmt->execute([
                ':title' => $title,
                ':tags' => $tags,
                ':description' => $description,
                ':duration' => $duration,
                ':image_url' => $image_url
            ]);
            // Redirection vers xp.php dès que la requete est executée
            header('Location: ../pages/xp.php');
            exit;
        } catch (PDOException $e) {
            // En cas d'erreur :
            echo "Erreur pendant l'ajout de l'école: " . $e->getMessage();
            exit;
        }
    } else {
        echo "Veuillez remplir tous les champs obligatoires.";
        exit;
    }
 } else {
    // Si on y accède de façon peu légitime sans requête POST on refuse
    header('Location: ../pages/xp.php');
    exit;
 }
 ?>
@@ -0,0 +1,52 @@
 <?php
 session_start();
 require_once '../functions/databaseConnection.php';
 // Pour faire cette fonction l'utilisateur doit être administrateur
 if (!isset($_SESSION['role']) || $_SESSION['role'] !== 'admin') {
    header('Location: ../pages/home.php');
    exit;
 }
 // La requête doit être un POST sinon on l'a refuse
 if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Récupération des données dans la requete POST
    $title = trim($_POST['title'] ?? '');
    $icon = trim($_POST['icon'] ?? '');
    $items = trim($_POST['items'] ?? '');
    $position = (int) ($_POST['position'] ?? 0);
    // On vérifie que les champs obligatoires ne sont pas vide
    if (!empty($title) && !empty($items)) {
        try {
            // On prépare la requête SQL pour insérer la nouvelle catégorie de compétences
            $stmt = $dbh->prepare('INSERT INTO skills (title, icon, items, position) VALUES (:title, :icon, :items, :position)');
            // On execute la requete préparée
            $stmt->execute([
                ':title' => $title,
                ':icon' => $icon,
                ':items' => $items,
                ':position' => $position
            ]);
            // Redirection vers skills.php dès que la requete est executée
            header('Location: ../pages/skills.php');
            exit;
        } catch (PDOException $e) {
            // En cas d'erreur :
            echo "Erreur pendant l'ajout de la compétence: " . $e->getMessage();
            exit;
        }
    } else {
        echo "Veuillez remplir tous les champs obligatoires.";
        exit;
    }
 } else {
    // Si on y accède de façon peu légitime sans requête POST on refuse
    header('Location: ../pages/skills.php');
    exit;
 }
 ?>
@@ -0,0 +1,31 @@
 <?php
 // On démarre la session
 session_start();
 // On ajoute la DB
 require_once('../functions/databaseConnection.php');
 // Si l'utilisateur n'est pas admin il ne peut pas executer le reste du script
 if (!isset($_SESSION['role']) || $_SESSION['role'] !== 'admin') {
    header('Location: ../pages/home.php');
    exit;
 }
 //L'id doit être collecté sinon l'utilisateur ne peux pas executer le reste du script
 if (!isset($_GET['id']) || !is_numeric($_GET['id'])) {
    header('Location: ../pages/admin.php');
    exit;
 }
 // On collecte l'id et on le met en variable locale
 $id = (int) $_GET['id'];
 try { // On essaie d'executer une requête qui est préparée
    $stmt = $dbh->prepare('DELETE FROM schools WHERE id = :id');
    $stmt->bindValue(':id', $id, PDO::PARAM_INT);
    $stmt->execute(); // Sinon on renvoie l'erreur
 } catch (PDOException $e) {
    die("Erreur lors de la suppression de l'école :" . $e->getMessage());
 }
 // On renvoie l'utilisateur sur admin.php
 header('Location: ../pages/admin.php');
 exit;
@@ -0,0 +1,31 @@
 <?php
 // On démarre la session
 session_start();
 // On ajoute la DB
 require_once('../functions/databaseConnection.php');
 // Si l'utilisateur n'est pas admin il ne peut pas executer le reste du script
 if (!isset($_SESSION['role']) || $_SESSION['role'] !== 'admin') {
    header('Location: ../pages/home.php');
    exit;
 }
 //L'id doit être collecté sinon l'utilisateur ne peux pas executer le reste du script
 if (!isset($_GET['id']) || !is_numeric($_GET['id'])) {
    header('Location: ../pages/admin.php');
    exit;
 }
 // On collecte l'id et on le met en variable locale
 $id = (int) $_GET['id'];
 try { // On essaie d'executer une requête qui est préparée
    $stmt = $dbh->prepare('DELETE FROM skills WHERE id = :id');
    $stmt->bindValue(':id', $id, PDO::PARAM_INT);
    $stmt->execute(); // Sinon on renvoie l'erreur
 } catch (PDOException $e) {
    die("Erreur lors de la suppression de la compétence :" . $e->getMessage());
 }
 // On renvoie l'utilisateur sur admin.php
 header('Location: ../pages/admin.php');
 exit;
@@ -0,0 +1,50 @@
 <?php
 // On démarre la session
 session_start();
 // On ajoute la DB
 require_once('../functions/databaseConnection.php');
 // Si l'utilisateur n'est pas admin il ne peut pas executer le reste du script
 if (!isset($_SESSION['role']) || $_SESSION['role'] !== 'admin') {
    header('Location: ../pages/home.php');
    exit;
 }
 if ( // Si les champs sont vides on renvoie vers admin.php
    !isset($_POST['id']) || !is_numeric($_POST['id']) ||
    empty($_POST['title']) ||
    empty($_POST['description']) ||
    empty($_POST['duration']) ||
    empty($_POST['imageurl'])
 ) {
    header('Location: ../pages/admin.php');
    exit;
 }
 // On récupère les données pour les mettres en variables locales
 $id = (int) $_POST['id'];
 $title = trim($_POST['title']);
 $tags = trim($_POST['tags'] ?? '');
 $description = trim($_POST['description']);
 $duration = trim($_POST['duration']);
 $imageurl = trim($_POST['imageurl']);
 try { // On essaie d'executer une requête qui est préparée
    $stmt = $dbh->prepare('
        UPDATE schools
        SET title = :title, tags = :tags, description = :description, duration = :duration, image_url = :image_url
        WHERE id = :id
    ');
    $stmt->bindValue(':title', $title, PDO::PARAM_STR);
    $stmt->bindValue(':tags', $tags, PDO::PARAM_STR);
    $stmt->bindValue(':description', $description, PDO::PARAM_STR);
    $stmt->bindValue(':duration', $duration, PDO::PARAM_STR);
    $stmt->bindValue(':image_url', $imageurl, PDO::PARAM_STR);
    $stmt->bindValue(':id', $id, PDO::PARAM_INT);
    $stmt->execute(); // Sinon on renvoie l'erreur
 } catch (PDOException $e) {
    die("Erreur lors de la modification de l'école :" . $e->getMessage());
 }
 // On renvoie l'utilisateur sur admin.php
 header('Location: ../pages/admin.php');
 exit;
@@ -0,0 +1,43 @@
 <?php
 // On démarre la session
 session_start();
 // On ajoute la DB
 require_once('../functions/databaseConnection.php');
 // Si l'utilisateur n'est pas admin il ne peut pas executer le reste du script
 if (!isset($_SESSION['role']) || $_SESSION['role'] !== 'admin') {
    header('Location: ../pages/home.php');
    exit;
 }
 // La requête doit être un POST sinon on l'a refuse
 if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
    header('Location: ../pages/admin.php');
    exit;
 }
 // On récupère les données pour les mettres en variables locales
 // La checkbox n'est envoyée que si elle est cochée
 $reglages = [
    'site_notice_title' => trim($_POST['notice_title'] ?? ''),
    'site_notice_text' => trim($_POST['notice_text'] ?? ''),
    'site_notice_enabled' => isset($_POST['notice_enabled']) ? '1' : '0'
 ];
 try { // On essaie d'executer une requête qui est préparée pour chaque réglage
    // ON DUPLICATE KEY UPDATE : crée le réglage s'il n'existe pas encore, le met à jour sinon
    $stmt = $dbh->prepare('INSERT INTO settings (name, value) VALUES (:name, :value) ON DUPLICATE KEY UPDATE value = VALUES(value)');
    foreach ($reglages as $name => $value) {
        $stmt->execute([
            ':name' => $name,
            ':value' => $value
        ]);
    }
 } catch (PDOException $e) {
    die("Erreur lors de la modification de la notification :" . $e->getMessage());
 }
 // On renvoie l'utilisateur sur admin.php
 header('Location: ../pages/admin.php');
 exit;
@@ -0,0 +1,46 @@
 <?php
 // On démarre la session
 session_start();
 // On ajoute la DB
 require_once('../functions/databaseConnection.php');
 // Si l'utilisateur n'est pas admin il ne peut pas executer le reste du script
 if (!isset($_SESSION['role']) || $_SESSION['role'] !== 'admin') {
    header('Location: ../pages/home.php');
    exit;
 }
 if ( // Si les champs sont vides on renvoie vers admin.php
    !isset($_POST['id']) || !is_numeric($_POST['id']) ||
    empty($_POST['title']) ||
    empty($_POST['items'])
 ) {
    header('Location: ../pages/admin.php');
    exit;
 }
 // On récupère les données pour les mettres en variables locales
 $id = (int) $_POST['id'];
 $title = trim($_POST['title']);
 $icon = trim($_POST['icon'] ?? '');
 $items = trim($_POST['items']);
 $position = (int) ($_POST['position'] ?? 0);
 try { // On essaie d'executer une requête qui est préparée
    $stmt = $dbh->prepare('
        UPDATE skills
        SET title = :title, icon = :icon, items = :items, position = :position
        WHERE id = :id
    ');
    $stmt->bindValue(':title', $title, PDO::PARAM_STR);
    $stmt->bindValue(':icon', $icon, PDO::PARAM_STR);
    $stmt->bindValue(':items', $items, PDO::PARAM_STR);
    $stmt->bindValue(':position', $position, PDO::PARAM_INT);
    $stmt->bindValue(':id', $id, PDO::PARAM_INT);
    $stmt->execute(); // Sinon on renvoie l'erreur
 } catch (PDOException $e) {
    die("Erreur lors de la modification de la compétence :" . $e->getMessage());
 }
 // On renvoie l'utilisateur sur admin.php
 header('Location: ../pages/admin.php');
 exit;
@@ -3,7 +3,7 @@ body {
        radial-gradient(circle at top, rgba(108, 99, 255, 0.18), transparent 35%),
        #0d0d0d;
    margin: 0;
-    font-family: Arial, sans-serif;
+    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    color: white;
    min-height: 100vh;
    display: flex;