From e50eeacaeb07f1187a52a9bbaf07006d9e465928 Mon Sep 17 00:00:00 2001 From: Esteban Date: Thu, 2 Jul 2026 09:24:33 +0200 Subject: [PATCH] =?UTF-8?q?Refonte=20du=20design=20:=20moderne=20+=20respo?= =?UTF-8?q?nsive,=20th=C3=A8me=20clair/sombre,=20maj=20comp=C3=A9tences?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- captcha.php | 3 + elements/footer.php | 5 +- elements/header.php | 86 +++- pages/admin.php | 3 + pages/cgu.php | 8 +- pages/contact.php | 58 +-- pages/home.php | 18 +- pages/login.php | 9 +- pages/projects.php | 13 +- pages/skills.php | 119 ++++- pages/xp.php | 13 +- styles/captcha.css | 2 +- styles/primary_css.css | 1085 ++++++++++++++++++++++++++++------------ 13 files changed, 997 insertions(+), 425 deletions(-) diff --git a/captcha.php b/captcha.php index 81cdfb5..2272c41 100644 --- a/captcha.php +++ b/captcha.php @@ -329,6 +329,9 @@ $attemptsLeft = $round['attempts_left'] ?? 0; Test anti-robot + + + diff --git a/elements/footer.php b/elements/footer.php index 7786027..8d92ae0 100644 --- a/elements/footer.php +++ b/elements/footer.php @@ -18,4 +18,7 @@ CGU - \ No newline at end of file + + + + \ No newline at end of file diff --git a/elements/header.php b/elements/header.php index 1d1d668..843e90a 100644 --- a/elements/header.php +++ b/elements/header.php @@ -1,6 +1,6 @@ - - - - - +// Titre de la page : chaque page peut définir $pageTitle avant d'inclure le header +$pageTitle = isset($pageTitle) ? $pageTitle . ' — Esteban MOUSSU' : 'Esteban MOUSSU — Portfolio'; + +// Page courante pour souligner le lien actif dans la navigation +$currentPage = basename($_SERVER['PHP_SELF']); +?> + + + + + + + <?php echo htmlspecialchars($pageTitle); ?> + + + + + + + + + + + + + + + -
+
Esteban MOUSSU - PortFolio +
+ -
+
-
\ No newline at end of file +
diff --git a/pages/admin.php b/pages/admin.php index 7ace8c0..321fc59 100644 --- a/pages/admin.php +++ b/pages/admin.php @@ -1,4 +1,7 @@ -
+

Conditions générales d'utilisation

Dernière mise à jour : 29 juin 2026

@@ -57,7 +61,7 @@ require_once('./../elements/header.php');

12. Droit applicable

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.

-
+ - -
-
-
-
-

Contact

-

Moussu Esteban

-

esteban.moussu@ik.me

-

20 Grande rue

-

52500 Broncourt

+
+
+
+
+

Contact

+

Moussu Esteban

+

esteban.moussu@ik.me

+

20 Grande rue

+

52500 Broncourt

+
+ + +
+ +
+ +
- - - -
- - -
+ + - - - - - -
-
-
-
- + + + + + + \ No newline at end of file +?> diff --git a/pages/home.php b/pages/home.php index d806bad..37bdf0b 100644 --- a/pages/home.php +++ b/pages/home.php @@ -3,6 +3,8 @@ // 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'); @@ -19,6 +21,20 @@ require_once('./../elements/header.php'); (Ctrl + F5 ou Cmd + Shift + R) pour voir les dernières modifications.

+ +
+ Étudiant en informatique +

Salut, moi c'est Esteban

+

+ 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. +

+
+ Voir mes projets + Me contacter +
+
+
@@ -50,7 +66,7 @@ require_once('./../elements/header.php');

Compétences

-

PAS ENCORE DEV

+

Systèmes, réseaux et développement.

diff --git a/pages/login.php b/pages/login.php index 1f6a98d..d8cc86b 100644 --- a/pages/login.php +++ b/pages/login.php @@ -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'])){ ?> - - - - \ No newline at end of file +require_once('../elements/footer.php'); ?> diff --git a/pages/projects.php b/pages/projects.php index c6d8ab3..e8db958 100644 --- a/pages/projects.php +++ b/pages/projects.php @@ -1,20 +1,25 @@ -Vous êtes administrateur, vous pouvez modifier les projets ici.

"; + echo "

Vous êtes administrateur, vous pouvez modifier les projets ici.

"; } // Affichages des projets ?> -

Liste des projets

+
+

Projets

+

Mes réalisations personnelles, scolaires et professionnelles.

+
\ No newline at end of file +require_once('../elements/footer.php'); ?> diff --git a/pages/skills.php b/pages/skills.php index ca6fe14..d64de94 100644 --- a/pages/skills.php +++ b/pages/skills.php @@ -2,6 +2,8 @@ // Compétences +// Titre de l'onglet +$pageTitle = 'Compétences'; // On ajoute ici le header require_once('./../elements/header.php'); @@ -9,44 +11,107 @@ require_once('./../elements/header.php'); ?> +
-
-

Compétences

-
+
+

Compétences

+

Un aperçu des technologies et des domaines que je maîtrise.

+
-

Systèmes d'exploitation :

-
    -
  • Windows (Server/XP 8 10 11)
    • -
  • Linux
    • -
  • macOS
    • -
+
-

Réseaux :

-
    -
  • Adressage IP
    • -
  • VLAN
    • -
  • Pare-feu
    • -
  • DNS (Bind9)
    • -
  • DHCP (ISC DHCP)
    • -
  • Proxy (Proxy Squid)
    • -
- -

Code :

-
    -
  • HTML
    • -
  • CSS
    • -
  • JavaScript
    • -
  • PHP
    • -
+ +
+
+ +
+

Systèmes d'exploitation

+
    +
  • Windows (Serveur/XP/8/10/11)
    • +
  • Linux (Debian/Ubuntu)
    • +
  • macOS
    • +
+
+ +
+
+ +
+

Réseaux

+
    +
  • Adressage IP
    • +
  • VLAN
    • +
  • Pare-feu (iptables/ufw)
    • +
  • DNS (Bind9)
    • +
  • DHCP (ISC DHCP)
    • +
  • Proxy (Squid)
    • +
+
+ +
+
+ +
+

Scripting

+
    +
  • Bash
    • +
  • Python
    • +
  • Java
    • +
  • Ansible
    • +
+
+ +
+
+ +
+

Applications

+
    +
  • LDAP (Windows AD)
    • +
  • GLPI
    • +
  • FOG
    • +
  • Nginx / Apache
    • +
  • Docker
    • +
  • Guacamole
    • +
  • MySQL / MariaDB
    • +
+
+ +
+
+ +
+

Développement web

+
    +
  • HTML
    • +
  • CSS
    • +
  • JavaScript
    • +
  • PHP
    • +
+
+ +
+
+ +
+

Virtualisation & Outils

+
    +
  • Proxmox
    • +
  • VirtualBox
    • +
  • Git (GitHub, Gitea)
    • +
+
+
+
\ No newline at end of file +require_once('../elements/footer.php'); ?> diff --git a/pages/xp.php b/pages/xp.php index c050dd3..99225d4 100644 --- a/pages/xp.php +++ b/pages/xp.php @@ -1,20 +1,25 @@ -Vous êtes administrateur, vous pouvez modifier les experiences ici.

"; + echo "

Vous êtes administrateur, vous pouvez modifier les experiences ici.

"; } // Affichages des xp pro ?> -

Liste des expériences professionnelles

+
+

Expériences professionnelles

+

Mes stages et missions réalisées en entreprise.

+
\ No newline at end of file +require_once('../elements/footer.php'); ?> diff --git a/styles/captcha.css b/styles/captcha.css index a7a65fe..f18c532 100644 --- a/styles/captcha.css +++ b/styles/captcha.css @@ -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; diff --git a/styles/primary_css.css b/styles/primary_css.css index 9284b09..762e94c 100644 --- a/styles/primary_css.css +++ b/styles/primary_css.css @@ -1,81 +1,316 @@ /* ---- LE CSS EST SOIT GÉNÉRÉ PAR INTEL ARTI SOIT RÉUTILISÉ D'UN AUTRE PROJET ---- */ -/* ---- En général ---- */ +/* ---- Variables globales du thème (sombre par défaut) ---- */ +:root { + --bg: #0a0a10; + --bg-soft: #10101a; + --surface: #13131d; + --surface-2: #1a1a28; + --surface-3: #202030; + --border: #262638; + --border-strong: #34344a; + --accent: #6c63ff; + --accent-strong: #574fe0; + --accent-light: #8f88ff; + --accent-soft: rgba(108, 99, 255, 0.14); + --accent-border: rgba(108, 99, 255, 0.32); + --text: #f2f2f8; + --text-soft: #c7c7d6; + --text-muted: #9b9bb2; + --danger: #e5484d; + --danger-dark: #b03538; + --success: #46d369; + --radius-sm: 10px; + --radius: 16px; + --radius-lg: 22px; + --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.25); + --shadow: 0 14px 34px rgba(0, 0, 0, 0.35); + --shadow-accent: 0 14px 34px rgba(108, 99, 255, 0.22); + --glow-1: rgba(108, 99, 255, 0.14); + --glow-2: rgba(108, 99, 255, 0.07); + --header-bg: rgba(12, 12, 18, 0.78); + --nav-bg: rgba(12, 12, 18, 0.97); + --footer-bg: rgba(12, 12, 18, 0.6); + --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; + color-scheme: dark; +} + +/* ---- Thème clair : activé via data-theme="light" sur ---- */ +[data-theme="light"] { + --bg: #f4f4f9; + --bg-soft: #ffffff; + --surface: #ffffff; + --surface-2: #f1f1f7; + --surface-3: #e9e9f2; + --border: #e3e3ee; + --border-strong: #cfcfe0; + --accent-light: #5a51e8; + --accent-soft: rgba(108, 99, 255, 0.1); + --accent-border: rgba(108, 99, 255, 0.3); + --text: #191924; + --text-soft: #3c3c4e; + --text-muted: #6d6d84; + --shadow-sm: 0 4px 14px rgba(30, 30, 60, 0.08); + --shadow: 0 14px 34px rgba(30, 30, 60, 0.12); + --shadow-accent: 0 14px 34px rgba(108, 99, 255, 0.18); + --glow-1: rgba(108, 99, 255, 0.1); + --glow-2: rgba(108, 99, 255, 0.05); + --header-bg: rgba(255, 255, 255, 0.82); + --nav-bg: rgba(255, 255, 255, 0.98); + --footer-bg: rgba(255, 255, 255, 0.7); + color-scheme: light; +} + +/* ---- Reset / base ---- */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +html, body { + height: 100%; + margin: 0; + padding: 0; +} /* Background de page */ body { - background-color: #0d0d0d; - margin: 0; - font-family: Arial, sans-serif; + background: + radial-gradient(1000px 500px at 85% -10%, var(--glow-1), transparent 60%), + radial-gradient(800px 420px at -10% 30%, var(--glow-2), transparent 55%), + var(--bg); + background-attachment: fixed; + transition: background-color 0.3s ease, color 0.3s ease; + color: var(--text); + font-family: var(--font); + line-height: 1.6; + -webkit-font-smoothing: antialiased; + + /* Sticky footer */ + display: flex; + flex-direction: column; + min-height: 100vh; +} + +main { + flex: 1; /* Pousse le footer vers le bas si le contenu est court */ + width: 100%; +} + +img { + max-width: 100%; +} + +::selection { + background: var(--accent); color: white; } /* ---- Header de la page ---- */ -/* header */ -header { - background-color: #111111; +/* header : sticky avec effet de flou */ +.site-header { + position: sticky; + top: 0; + z-index: 100; display: flex; justify-content: space-between; align-items: center; - padding: 15px 40px; + gap: 16px; + padding: 14px clamp(16px, 4vw, 48px); + background: var(--header-bg); + backdrop-filter: blur(14px); + -webkit-backdrop-filter: blur(14px); + border-bottom: 1px solid var(--border); + transition: background-color 0.3s ease; +} + +/* Groupe nav + boutons à droite du header */ +.header-right { + display: flex; + align-items: center; + gap: 10px; } /* Titre de la page ou même le Logo */ .titre-de-page { - font-weight: bold; - font-size: 20px; + font-weight: 800; + font-size: 19px; + letter-spacing: -0.02em; text-decoration: none; - color: white; + color: var(--text); + white-space: nowrap; } /* Barre de navigation */ -nav a { - color: #aaaaaa; +.site-nav { + display: flex; + align-items: center; + gap: 4px; + flex-wrap: wrap; +} + +.site-nav a { + color: var(--text-muted); text-decoration: none; - margin-left: 10px; - padding: 8px 15px; - border-radius: 8px; + font-size: 15px; + font-weight: 500; + padding: 8px 14px; + border-radius: 10px; + transition: color 0.2s ease, background-color 0.2s ease; } -nav a:hover { - background-color: #1a1a24; +.site-nav a:hover { + background-color: var(--surface-2); + color: var(--text); +} + +/* Lien de la page courante */ +.site-nav a.active { + color: var(--accent-light); + background-color: var(--accent-soft); +} + +/* Bouton Connexion / Deconnexion mis en avant */ +.site-nav a.nav-cta { + margin-left: 8px; color: white; + background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%); + box-shadow: 0 6px 18px rgba(108, 99, 255, 0.3); } -@media (max-width: 700px) { - header { - flex-direction: column; - align-items: flex-start; - padding: 15px 20px; - gap: 12px; - } +.site-nav a.nav-cta:hover { + filter: brightness(1.1); +} - nav { +/* Bouton de changement de thème (lune / soleil) */ +.theme-toggle { + display: inline-flex; + align-items: center; + justify-content: center; + width: 42px; + height: 42px; + background: var(--surface-2); + border: 1px solid var(--border); + border-radius: 10px; + color: var(--text-muted); + font-size: 16px; + cursor: pointer; + transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; +} + +.theme-toggle:hover { + color: var(--accent-light); + border-color: var(--accent-border); + transform: translateY(-1px); +} + +/* En sombre on montre le soleil (passer en clair), en clair la lune */ +.theme-toggle .fa-moon { + display: none; +} + +[data-theme="light"] .theme-toggle .fa-sun { + display: none; +} + +[data-theme="light"] .theme-toggle .fa-moon { + display: inline; +} + +/* Bouton burger (mobile uniquement) */ +.nav-toggle { + display: none; + flex-direction: column; + justify-content: center; + gap: 5px; + width: 44px; + height: 44px; + padding: 10px; + background: var(--surface-2); + border: 1px solid var(--border); + border-radius: 10px; + cursor: pointer; +} + +.nav-toggle span { + display: block; + height: 2px; + width: 100%; + background: var(--text); + border-radius: 2px; + transition: transform 0.25s ease, opacity 0.25s ease; +} + +/* Animation du burger en croix quand le menu est ouvert */ +.nav-open .nav-toggle span:nth-child(1) { + transform: translateY(7px) rotate(45deg); +} + +.nav-open .nav-toggle span:nth-child(2) { + opacity: 0; +} + +.nav-open .nav-toggle span:nth-child(3) { + transform: translateY(-7px) rotate(-45deg); +} + +/* Responsive : navigation mobile en panneau déroulant */ +@media (max-width: 860px) { + .nav-toggle { display: flex; - flex-wrap: wrap; - gap: 6px; - width: 100%; } - nav a { + .site-nav { + display: none; + position: absolute; + top: 100%; + left: 0; + right: 0; + flex-direction: column; + align-items: stretch; + gap: 4px; + padding: 12px 16px 16px; + background: var(--nav-bg); + backdrop-filter: blur(14px); + -webkit-backdrop-filter: blur(14px); + border-bottom: 1px solid var(--border); + box-shadow: var(--shadow); + } + + .nav-open .site-nav { + display: flex; + } + + .site-nav a { + padding: 13px 16px; + font-size: 16px; + } + + .site-nav a.nav-cta { margin-left: 0; - padding: 8px 12px; + margin-top: 6px; + text-align: center; } } +/* ---- Message dev / cache ---- */ .dev-cache-notice { margin: 24px auto; padding: 16px 20px; max-width: 900px; + width: calc(100% - 32px); border-radius: 14px; - background: linear-gradient(135deg, rgba(255, 196, 0, 0.16), rgba(255, 140, 0, 0.10)); - border: 1px solid rgba(255, 196, 0, 0.35); - color: #fff3cd; - font-size: 0.98rem; + background: linear-gradient(135deg, rgba(255, 196, 0, 0.14), rgba(255, 140, 0, 0.08)); + border: 1px solid rgba(255, 196, 0, 0.3); + color: #ffeeba; + font-size: 0.95rem; line-height: 1.6; - box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); - backdrop-filter: blur(6px); } .dev-cache-notice strong { @@ -85,17 +320,147 @@ nav a:hover { .dev-cache-notice::before { content: "⚠️"; margin-right: 10px; - font-size: 1.1rem; + font-size: 1.05rem; } -@media (max-width: 768px) { - .dev-cache-notice { - margin: 16px; - padding: 14px 16px; - font-size: 0.93rem; - } +/* Version thème clair du bandeau d'avertissement */ +[data-theme="light"] .dev-cache-notice { + background: linear-gradient(135deg, rgba(255, 196, 0, 0.16), rgba(255, 140, 0, 0.1)); + border-color: rgba(190, 130, 0, 0.35); + color: #7a5b00; } +[data-theme="light"] .dev-cache-notice strong { + color: #8a6400; +} + +/* ---- Message admin en haut des listes ---- */ +.admin-notice { + margin: 20px auto 0; + padding: 12px 18px; + max-width: 900px; + width: calc(100% - 32px); + text-align: center; + border-radius: 12px; + background: var(--accent-soft); + border: 1px solid var(--accent-border); + color: var(--text-soft); + font-size: 0.95rem; +} + +.admin-notice a { + color: var(--accent-light); + font-weight: 600; +} + +/* ---- HERO (page d'accueil) ---- */ +.hero { + max-width: 1200px; + margin: 0 auto; + padding: clamp(56px, 10vw, 120px) clamp(20px, 4vw, 40px) clamp(30px, 5vw, 60px); + text-align: center; +} + +.hero-badge { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 8px 16px; + margin-bottom: 24px; + border-radius: 999px; + background: var(--accent-soft); + border: 1px solid var(--accent-border); + color: var(--accent-light); + font-size: 14px; + font-weight: 600; +} + +.hero h1 { + margin: 0 0 18px; + font-size: clamp(34px, 6vw, 64px); + font-weight: 800; + letter-spacing: -0.03em; + line-height: 1.1; +} + +.hero h1 .accent { + background: linear-gradient(120deg, var(--accent-light), var(--accent)); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + color: transparent; +} + +.hero p { + margin: 0 auto 32px; + max-width: 640px; + color: var(--text-muted); + font-size: clamp(16px, 2vw, 19px); + line-height: 1.7; +} + +.hero-actions { + display: flex; + justify-content: center; + gap: 14px; + flex-wrap: wrap; +} + +.btn { + display: inline-flex; + align-items: center; + gap: 10px; + padding: 14px 28px; + border-radius: 12px; + font-size: 16px; + font-weight: 600; + text-decoration: none; + transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, background-color 0.2s ease; +} + +.btn-primary { + color: white; + background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%); + box-shadow: 0 10px 26px rgba(108, 99, 255, 0.32); +} + +.btn-primary:hover { + transform: translateY(-2px); + filter: brightness(1.08); + box-shadow: 0 14px 32px rgba(108, 99, 255, 0.4); +} + +.btn-ghost { + color: var(--text); + background: var(--surface-2); + border: 1px solid var(--border-strong); +} + +.btn-ghost:hover { + transform: translateY(-2px); + background: var(--surface-3); + border-color: var(--accent-border); +} + +/* ---- Titres de pages (Projets / Expériences / etc.) ---- */ +.page-header { + max-width: 1200px; + margin: clamp(28px, 5vw, 56px) auto 8px; + padding: 0 clamp(16px, 4vw, 40px); +} + +.page-header h1 { + margin: 0 0 8px; + font-size: clamp(28px, 4.5vw, 42px); + font-weight: 800; + letter-spacing: -0.02em; +} + +.page-header p { + margin: 0; + color: var(--text-muted); + font-size: clamp(15px, 2vw, 17px); +} /* ---- PAGE LOGIN ---- */ @@ -104,99 +469,113 @@ nav a:hover { display: flex; justify-content: center; align-items: center; - height: 80vh; + min-height: 70vh; + padding: 40px 16px; } -/* La carte blanche/grise */ +/* La carte de connexion */ .login-card { - background-color: #1a1a2e; - border-radius: 16px; - padding: 40px; - width: 340px; - max-width: 90%; + background: linear-gradient(180deg, var(--surface) 0%, var(--bg-soft) 100%); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + box-shadow: var(--shadow); + padding: 40px 36px; + width: 380px; + max-width: 100%; text-align: center; } /* Titre dans la carte */ .login-card .logo-blanc { - color: white; + color: var(--text); font-size: 26px; - font-weight: bold; + font-weight: 800; } .login-card .logo-violet { - color: #6c63ff; + color: var(--accent); font-size: 26px; - font-weight: bold; + font-weight: 800; } /* Sous-titre */ .login-card p { - color: #aaaaaa; - margin-bottom: 25px; + color: var(--text); + font-size: 22px; + font-weight: 700; + margin: 0 0 24px; } /* Labels */ .login-card label { display: block; text-align: left; - color: white; + color: var(--text-soft); margin-bottom: 6px; + font-size: 14px; } /* Champs de texte */ .login-card input[type="text"], .login-card input[type="password"] { width: 100%; - background-color: #2a2a3e; - border: 1px solid #3a3a5e; - border-radius: 8px; - color: white; - padding: 12px; - margin-bottom: 20px; - box-sizing: border-box; + background-color: var(--surface-2); + border: 1px solid var(--border-strong); + border-radius: var(--radius-sm); + color: var(--text); + font-family: var(--font); + font-size: 15px; + padding: 13px 15px; + margin-bottom: 16px; + transition: border-color 0.2s ease, box-shadow 0.2s ease; +} + +.login-card input[type="text"]:focus, +.login-card input[type="password"]:focus { + outline: none; + border-color: var(--accent); + box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.2); +} + +.login-card input::placeholder { + color: var(--text-muted); } /* Bouton connexion */ .login-card input[type="submit"] { width: 100%; - background-color: #6c63ff; + background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%); color: white; border: none; - border-radius: 8px; + border-radius: var(--radius-sm); padding: 14px; + font-family: var(--font); font-size: 16px; + font-weight: 600; cursor: pointer; + margin-top: 8px; + box-shadow: 0 10px 24px rgba(108, 99, 255, 0.28); + transition: transform 0.2s ease, filter 0.2s ease; } .login-card input[type="submit"]:hover { - background-color: #5a52e0; + transform: translateY(-1px); + filter: brightness(1.08); } -@media (max-width: 700px) { - .login-container { - height: auto; - min-height: 80vh; - padding: 30px 16px; - } - - .login-card { - padding: 28px 24px; - } -} - -/* ---- PAGE AJOUT PROJET ---- */ +/* ---- PAGE AJOUT PROJET / FORMULAIRES ADMIN ---- */ .project-container { display: flex; justify-content: center; - padding: 10px 20px; + padding: 14px clamp(16px, 4vw, 24px); } .project-form-card { - background-color: #111116; /* Fond très sombre comme sur l'image */ - border: 1px dashed #3a3a5e; /* Bordure pointillée */ - border-radius: 12px; - padding: 30px; + background: linear-gradient(180deg, var(--surface) 0%, var(--bg-soft) 100%); + border: 1px solid var(--border); + border-radius: var(--radius); + box-shadow: var(--shadow-sm); + padding: clamp(20px, 4vw, 32px); width: 800px; max-width: 100%; } @@ -208,26 +587,29 @@ nav a:hover { z-index: 2; display: inline-flex; align-items: center; - padding: 8px 16px; - background-color: rgba(39, 255, 83, 0.10); + padding: 7px 14px; + background-color: rgba(10, 20, 12, 0.75); + backdrop-filter: blur(6px); color: #7dff98; - border: 2px solid #39ff5a; - border-radius: 16px; - font-size: 13px; - font-weight: bold; + border: 1px solid rgba(57, 255, 90, 0.55); + border-radius: 999px; + font-size: 12px; + font-weight: 700; line-height: 1; + letter-spacing: 0.02em; } .project-header h2 { margin-top: 0; margin-bottom: 20px; - font-size: 20px; + font-size: 22px; + font-weight: 700; display: flex; align-items: center; } .badge-admin { - color: #6c63ff; /* Ton violet */ + color: var(--accent); font-size: 14px; margin-left: 10px; font-weight: normal; @@ -247,11 +629,13 @@ nav a:hover { margin-bottom: 20px; } -.form-group label { +.form-group label, +.project-form-card label { display: block; - color: #aaaaaa; + color: var(--text-soft); margin-bottom: 8px; font-size: 14px; + font-weight: 500; } .project-banner { @@ -264,17 +648,24 @@ nav a:hover { .project-form-card input[type="password"], .project-form-card textarea { width: 100%; - background-color: #1a1a24; - border: 1px solid #2a2a3e; - border-radius: 6px; - color: white; - padding: 12px; + background-color: var(--surface-2); + border: 1px solid var(--border); + border-radius: var(--radius-sm); + color: var(--text); + font-family: var(--font); + font-size: 15px; + padding: 12px 14px; margin-bottom: 16px; - box-sizing: border-box; transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } -/* Correction ici : project-form-card au lieu de project-card */ +.project-form-card input:focus, +.project-form-card textarea:focus { + outline: none; + border-color: var(--accent); + box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.18); +} + .project-form-card textarea { min-height: 100px; resize: vertical; @@ -282,11 +673,11 @@ nav a:hover { /* Zone pour l'URL (qui remplace l'upload de fichier) */ .url-input-zone { - border: 1px dashed #3a3a5e; - border-radius: 6px; + border: 1px dashed var(--border-strong); + border-radius: var(--radius-sm); padding: 40px 20px; text-align: center; - background-color: #15151c; + background-color: var(--bg-soft); } .url-input-zone input { @@ -295,14 +686,6 @@ nav a:hover { } @media (max-width: 700px) { - .project-container { - padding: 10px 16px; - } - - .project-form-card { - padding: 18px; - } - .form-row { flex-direction: column; gap: 0; @@ -319,87 +702,109 @@ nav a:hover { /* Bouton violet */ .btn-submit { - background-color: #6c63ff; + background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%); color: white; border: none; - border-radius: 8px; + border-radius: var(--radius-sm); padding: 12px 24px; + font-family: var(--font); font-size: 15px; - font-weight: bold; + font-weight: 600; cursor: pointer; + transition: transform 0.2s ease, filter 0.2s ease; } .btn-submit:hover { - background-color: #5a52e0; + transform: translateY(-1px); + filter: brightness(1.08); } +/* ---- LISTES DE PROJETS / EXPÉRIENCES ---- */ .projects-title { - color: white; - font-size: 22px; - font-weight: bold; - margin: 0; - padding: 0 40px 20px 40px; + color: var(--text); + font-size: clamp(20px, 3vw, 26px); + font-weight: 800; + letter-spacing: -0.01em; + max-width: 1280px; + margin: 24px auto 4px; + padding: 0 clamp(16px, 4vw, 40px) 16px; } .projects-list { display: grid; - grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; - padding: 0 40px 40px 40px; + max-width: 1280px; + margin: 0 auto; + padding: 8px clamp(16px, 4vw, 40px) 48px; } .projects-list .project-card { - background-color: #111116; - border: 1px solid #2a2a3e; - border-radius: 16px; + display: flex; + flex-direction: column; + background: linear-gradient(180deg, var(--surface) 0%, var(--bg-soft) 100%); + border: 1px solid var(--border); + border-radius: var(--radius); overflow: hidden; - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); - transition: transform 0.2s ease, box-shadow 0.2s ease; + box-shadow: var(--shadow-sm); + transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .projects-list .project-card:hover { - transform: translateY(-4px); - box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); + transform: translateY(-5px); + border-color: var(--accent-border); + box-shadow: var(--shadow-accent); } .project-banner img { width: 100%; - height: 220px; + height: 200px; object-fit: cover; display: block; + transition: transform 0.35s ease; +} + +.project-card:hover .project-banner img { + transform: scale(1.04); } .project-content { - padding: 20px; + padding: 22px; + display: flex; + flex-direction: column; + flex: 1; } .project-content h2 { margin: 0 0 12px; - font-size: 22px; - color: white; + font-size: 21px; + font-weight: 700; + letter-spacing: -0.01em; + color: var(--text); } .project-content p { - margin: 0; - color: #b8b8c7; - line-height: 1.6; + margin: 0 0 8px; + color: var(--text-muted); + font-size: 15px; + line-height: 1.65; } .project-tags { display: flex; flex-wrap: wrap; - gap: 10px; - margin-bottom: 16px; + gap: 8px; + margin-bottom: 14px; } .tag { - background-color: rgba(108, 99, 255, 0.15); - color: #8f88ff; - border: 1px solid rgba(108, 99, 255, 0.35); - padding: 6px 12px; + background-color: var(--accent-soft); + color: var(--accent-light); + border: 1px solid var(--accent-border); + padding: 5px 12px; border-radius: 999px; - font-size: 13px; - font-weight: bold; + font-size: 12.5px; + font-weight: 600; } /* ---- Panel admin ---- */ @@ -407,37 +812,33 @@ nav a:hover { .admin-actions { display: flex; gap: 12px; - margin-top: 20px; + margin-top: auto; + padding-top: 20px; flex-wrap: wrap; } .admin-actions .btn-submit { display: inline-block; text-decoration: none; + text-align: center; } .btn-edit { - background-color: #6c63ff; + background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%); } .btn-delete { - background-color: #a12c2f; + background: linear-gradient(180deg, var(--danger) 0%, var(--danger-dark) 100%); } .btn-delete:hover { - background-color: #7e2023; + filter: brightness(1.1); } @media (max-width: 700px) { - .projects-title { - padding: 0 16px 16px 16px; - font-size: 20px; - } - .projects-list { grid-template-columns: 1fr; - padding: 0 16px 24px 16px; - gap: 16px; + gap: 18px; } .project-banner img { @@ -450,34 +851,15 @@ nav a:hover { .admin-actions .btn-submit { width: 100%; - text-align: center; - box-sizing: border-box; } } -/* ---- FORCER LE FOOTER EN BAS (STICKY FOOTER) ---- */ -html, body { - height: 100%; - margin: 0; - padding: 0; -} - -body { - display: flex; - flex-direction: column; - min-height: 100vh; -} - -main { - flex: 1; /* Pousse le footer vers le bas si le contenu est court */ -} - /* ---- STYLES DU FOOTER ---- */ .site-footer { - background-color: #111116; - border-top: 1px solid #2a2a3e; - margin-top: 0; - padding: 30px 40px 20px; + background-color: var(--footer-bg); + border-top: 1px solid var(--border); + margin-top: 48px; + padding: 28px clamp(16px, 4vw, 40px); font-size: 14px; } @@ -492,30 +874,29 @@ main { } .footer-copyright { - color: #aaaaaa; + color: var(--text-muted); margin: 0; } .footer-links { display: flex; - gap: 24px; + gap: 22px; align-items: center; flex-wrap: wrap; } .footer-links a, .footer-links .discord-handle { - color: #aaaaaa; + color: var(--text-muted); text-decoration: none; - transition: color 0.2s ease, background-color 0.2s ease; + transition: color 0.2s ease; padding: 6px 0; cursor: pointer; } .footer-links a:hover, .footer-links .discord-handle:hover { - color: #6c63ff; - text-decoration: underline; + color: var(--accent-light); } /* Responsive : mobile */ @@ -533,8 +914,7 @@ main { .contact-page { width: 100%; - padding: 60px 20px 80px; - box-sizing: border-box; + padding: clamp(32px, 6vw, 64px) clamp(14px, 4vw, 24px) clamp(48px, 8vw, 80px); } .contact-wrapper { @@ -545,18 +925,20 @@ main { .contact-card { display: grid; grid-template-columns: 320px 1fr; - gap: 32px; - background-color: #111116; - border: 1px solid #2a2a3e; - border-radius: 20px; - padding: 32px; - box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28); + gap: clamp(18px, 3vw, 32px); + background: linear-gradient(180deg, var(--surface) 0%, var(--bg-soft) 100%); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + padding: clamp(18px, 3vw, 32px); + box-shadow: var(--shadow); } .contact-info { - background: linear-gradient(180deg, #161622 0%, #111116 100%); - border: 1px solid #2a2a3e; - border-radius: 16px; + background: + radial-gradient(400px 200px at 20% 0%, rgba(108, 99, 255, 0.16), transparent 70%), + var(--surface-2); + border: 1px solid var(--border); + border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; @@ -565,23 +947,25 @@ main { .contact-title { margin: 0 0 10px; - font-size: 32px; - font-weight: bold; - color: white; + font-size: clamp(26px, 3vw, 32px); + font-weight: 800; + letter-spacing: -0.02em; + color: var(--text); } .contact-name { margin: 0 0 18px; font-size: 18px; font-weight: 600; - color: #cfcfff; + color: var(--accent-light); } .contact-line { margin: 0 0 10px; font-size: 15px; - color: #aaaaaa; + color: var(--text-muted); line-height: 1.6; + overflow-wrap: anywhere; } .contact-form { @@ -600,51 +984,52 @@ main { .contact-form input[type="email"], .contact-form textarea { width: 100%; - background-color: #1a1a24; - border: 1px solid #2a2a3e; - border-radius: 10px; - color: white; + background-color: var(--surface-2); + border: 1px solid var(--border); + border-radius: var(--radius-sm); + color: var(--text); padding: 14px 16px; font-size: 15px; - box-sizing: border-box; + font-family: var(--font); transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } .contact-form textarea { min-height: 180px; resize: vertical; - font-family: Arial, sans-serif; } .contact-form input::placeholder, .contact-form textarea::placeholder { - color: #8f8fa8; + color: var(--text-muted); } .contact-form input:focus, .contact-form textarea:focus { outline: none; - border-color: #6c63ff; + border-color: var(--accent); box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.18); - background-color: #202030; + background-color: var(--surface-3); } .contact-form input[type="submit"] { width: fit-content; min-width: 220px; - background-color: #6c63ff; + background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%); color: white; border: none; - border-radius: 10px; + border-radius: var(--radius-sm); padding: 14px 24px; font-size: 15px; - font-weight: bold; + font-family: var(--font); + font-weight: 600; cursor: pointer; - transition: background-color 0.2s ease, transform 0.2s ease; + box-shadow: 0 10px 24px rgba(108, 99, 255, 0.28); + transition: filter 0.2s ease, transform 0.2s ease; } .contact-form input[type="submit"]:hover { - background-color: #5a52e0; + filter: brightness(1.08); transform: translateY(-1px); } @@ -663,24 +1048,10 @@ main { } @media (max-width: 560px) { - .contact-page { - padding: 30px 14px 50px; - } - - .contact-card { - padding: 18px; - gap: 18px; - border-radius: 16px; - } - .contact-grid { grid-template-columns: 1fr; } - .contact-title { - font-size: 26px; - } - .contact-form input[type="submit"] { width: 100%; min-width: 0; @@ -691,8 +1062,8 @@ main { .quick-links-section { max-width: 1200px; - margin: 70px auto; - padding: 0 40px; + margin: clamp(40px, 7vw, 70px) auto; + padding: 0 clamp(20px, 4vw, 40px); } .quick-links-header { @@ -701,70 +1072,77 @@ main { .quick-links-header h2 { margin: 0 0 10px; - font-size: 42px; + font-size: clamp(28px, 4vw, 42px); font-weight: 800; - color: white; + letter-spacing: -0.02em; + color: var(--text); } .quick-links-header p { margin: 0; - color: #aaaaaa; - font-size: 18px; + color: var(--text-muted); + font-size: clamp(15px, 2vw, 18px); } .quick-links-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); - gap: 24px; + gap: 20px; } .quick-link-card { display: flex; flex-direction: column; justify-content: flex-start; - min-height: 230px; - padding: 30px; - background: linear-gradient(180deg, #111116 0%, #0f1420 100%); - border: 1px solid #2a2a3e; - border-radius: 20px; + min-height: 220px; + padding: 28px; + background: linear-gradient(180deg, var(--surface) 0%, var(--bg-soft) 100%); + border: 1px solid var(--border); + border-radius: var(--radius-lg); text-decoration: none; - color: white; - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); + color: var(--text); + box-shadow: var(--shadow-sm); transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .quick-link-card:hover { transform: translateY(-6px); - border-color: #6c63ff; - box-shadow: 0 18px 40px rgba(108, 99, 255, 0.18); + border-color: var(--accent-border); + box-shadow: var(--shadow-accent); } .quick-link-icon { - width: 62px; - height: 62px; + width: 56px; + height: 56px; display: flex; align-items: center; justify-content: center; - margin-bottom: 26px; - border-radius: 16px; - background: rgba(108, 99, 255, 0.14); - border: 1px solid rgba(108, 99, 255, 0.28); - color: #8f88ff; - font-size: 26px; + margin-bottom: 22px; + border-radius: var(--radius); + background: var(--accent-soft); + border: 1px solid var(--accent-border); + color: var(--accent-light); + font-size: 22px; + transition: transform 0.25s ease; +} + +.quick-link-card:hover .quick-link-icon { + transform: scale(1.08); } .quick-link-card h3 { - margin: 0 0 14px; - font-size: 30px; - font-weight: 800; - color: white; + margin: 0 0 10px; + font-size: 24px; + font-weight: 700; + letter-spacing: -0.01em; + color: var(--text); } .quick-link-card p { margin: 0; - color: #aaaaaa; - font-size: 18px; - line-height: 1.7; + color: var(--text-muted); + font-size: 15.5px; + line-height: 1.65; } /* Responsive */ @@ -774,20 +1152,7 @@ main { } } -@media (max-width: 700px) { - .quick-links-section { - padding: 0 20px; - margin: 50px auto; - } - - .quick-links-header h2 { - font-size: 32px; - } - - .quick-links-header p { - font-size: 16px; - } - +@media (max-width: 620px) { .quick-links-grid { grid-template-columns: 1fr; } @@ -796,65 +1161,156 @@ main { min-height: auto; padding: 24px; } +} - .quick-link-card h3 { - font-size: 24px; - } +/* ---- PAGE COMPÉTENCES ---- */ +.skills-section { + max-width: 1200px; + margin: 0 auto; + padding: clamp(32px, 6vw, 56px) clamp(20px, 4vw, 40px) clamp(40px, 6vw, 64px); +} - .quick-link-card p { - font-size: 16px; - } +.skills-header { + margin-bottom: 32px; +} + +.skills-header h1 { + margin: 0 0 10px; + font-size: clamp(28px, 4.5vw, 42px); + font-weight: 800; + letter-spacing: -0.02em; +} + +.skills-header p { + margin: 0; + color: var(--text-muted); + font-size: clamp(15px, 2vw, 18px); +} + +.skills-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); + gap: 20px; +} + +.skill-category { + background: linear-gradient(180deg, var(--surface) 0%, var(--bg-soft) 100%); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + padding: 28px; + box-shadow: var(--shadow-sm); + transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; +} + +.skill-category:hover { + transform: translateY(-4px); + border-color: var(--accent-border); + box-shadow: var(--shadow-accent); +} + +.skill-category-icon { + width: 52px; + height: 52px; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 18px; + border-radius: var(--radius); + background: var(--accent-soft); + border: 1px solid var(--accent-border); + color: var(--accent-light); + font-size: 21px; +} + +.skill-category h2 { + margin: 0 0 16px; + font-size: 21px; + font-weight: 700; + letter-spacing: -0.01em; +} + +.skill-list { + list-style: none; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + gap: 10px; +} + +.skill-list li { + display: flex; + align-items: center; + gap: 10px; + padding: 10px 14px; + background: var(--surface-2); + border: 1px solid var(--border); + border-radius: var(--radius-sm); + color: var(--text-soft); + font-size: 15px; + transition: border-color 0.2s ease, color 0.2s ease; +} + +.skill-list li:hover { + border-color: var(--accent-border); + color: var(--text); +} + +.skill-list li i { + color: var(--accent-light); + width: 18px; + text-align: center; } /* ---- PAGE CGU ---- */ .cgu-page { max-width: 980px; - margin: 48px auto 72px; - padding: 0 24px; - box-sizing: border-box; + margin: clamp(28px, 5vw, 48px) auto clamp(48px, 7vw, 72px); + padding: 0 clamp(14px, 4vw, 24px); } .cgu-card { - background: linear-gradient(180deg, #111116 0%, #15151f 100%); - border: 1px solid #2a2a3e; - border-radius: 20px; - padding: 40px; - box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28); + background: linear-gradient(180deg, var(--surface) 0%, var(--bg-soft) 100%); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + padding: clamp(24px, 4vw, 40px); + box-shadow: var(--shadow); } .cgu-card h1 { margin: 0 0 10px; - color: white; - font-size: 38px; + color: var(--text); + font-size: clamp(26px, 4vw, 38px); font-weight: 800; + letter-spacing: -0.02em; line-height: 1.2; } .cgu-card h2 { margin: 0 0 24px; - color: #b8b8c7; - font-size: 17px; + color: var(--text-muted); + font-size: 16px; font-weight: 500; } .cgu-card hr { border: none; height: 1px; - background-color: #2a2a3e; + background-color: var(--border); margin: 0 0 28px; } .cgu-card h3 { margin: 30px 0 12px; - color: #8f88ff; - font-size: 22px; + color: var(--accent-light); + font-size: clamp(18px, 2.5vw, 22px); font-weight: 700; } .cgu-card p { margin: 0 0 14px; - color: #c7c7d4; - font-size: 16px; + color: var(--text-soft); + font-size: 15.5px; line-height: 1.8; } @@ -865,34 +1321,3 @@ main { .cgu-card br { display: none; } - -@media (max-width: 700px) { - .cgu-page { - margin: 28px auto 48px; - padding: 0 14px; - } - - .cgu-card { - padding: 24px 18px; - border-radius: 16px; - } - - .cgu-card h1 { - font-size: 28px; - } - - .cgu-card h2 { - font-size: 15px; - margin-bottom: 18px; - } - - .cgu-card h3 { - font-size: 19px; - margin-top: 24px; - } - - .cgu-card p { - font-size: 15px; - line-height: 1.7; - } -}