From 572f0745de6e150a30a51129a493d0f847a90f4f Mon Sep 17 00:00:00 2001
From: Jooliwa Studio <stephane@jooliwa.fr>
Date: Mon, 30 Mar 2026 10:44:31 +0200
Subject: [PATCH] New CV version

---
 index.html | 1120 ++++++++++++----------------------------------------
 1 file changed, 262 insertions(+), 858 deletions(-)

diff --git a/index.html b/index.html
index ce7398f..9700157 100644
--- a/index.html
+++ b/index.html
@@ -6,9 +6,7 @@
 <title>LIABEUF_STÉPHANE // CV.EXE</title>
 <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<!-- Primary: Google Fonts -->
 <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&family=Rajdhani:wght@300;400;600;700&display=swap" rel="stylesheet">
-<!-- Fallback: Bunny Fonts (GDPR-friendly mirror) -->
 <link href="https://fonts.bunny.net/css2?family=orbitron:wght@400;700;900&family=share-tech-mono&family=rajdhani:wght@300;400;600;700&display=swap" rel="stylesheet">
 <style>
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@@ -18,1008 +16,412 @@
     --bg2: #080d1a;
     --cyan: #00f5ff;
     --magenta: #ff00aa;
-    --yellow: #ffe600;
     --green: #00ff88;
-    --dark-cyan: #003d40;
     --text: #c8d8e8;
     --muted: #4a6080;
     --grid: rgba(0,245,255,0.04);
+    --font-mono: 'Share Tech Mono', 'Courier New', Courier, monospace;
+    --font-display: 'Orbitron', 'Arial Black', Impact, sans-serif;
+    --font-body: 'Rajdhani', 'Segoe UI', Arial, sans-serif;
   }
 
   html { scroll-behavior: smooth; }
 
   body {
-    font-family: 'Rajdhani', 'Segoe UI', Arial, sans-serif;
+    font-family: var(--font-body);
     background: var(--bg);
     color: var(--text);
     overflow-x: hidden;
     cursor: crosshair;
   }
 
-  /* ── SCANLINES overlay ── */
   body::before {
     content: '';
-    position: fixed;
-    inset: 0;
-    background: repeating-linear-gradient(
-      0deg,
-      transparent,
-      transparent 2px,
-      rgba(0,0,0,0.15) 2px,
-      rgba(0,0,0,0.15) 4px
-    );
-    pointer-events: none;
-    z-index: 9999;
+    position: fixed; inset: 0;
+    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.13) 2px, rgba(0,0,0,0.13) 4px);
+    pointer-events: none; z-index: 9999;
   }
-
-  /* ── GRID background ── */
   body::after {
     content: '';
-    position: fixed;
-    inset: 0;
-    background-image:
-      linear-gradient(var(--grid) 1px, transparent 1px),
-      linear-gradient(90deg, var(--grid) 1px, transparent 1px);
+    position: fixed; inset: 0;
+    background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
     background-size: 40px 40px;
-    pointer-events: none;
-    z-index: 0;
+    pointer-events: none; z-index: 0;
   }
 
-  /* ── GLITCH TEXT ── */
-  .glitch {
-    position: relative;
-  }
-  .glitch::before, .glitch::after {
-    content: attr(data-text);
-    position: absolute;
-    top: 0; left: 0;
-    width: 100%; height: 100%;
-  }
-  .glitch::before {
-    color: var(--magenta);
-    animation: glitch1 3s infinite;
-    clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
-  }
-  .glitch::after {
-    color: var(--cyan);
-    animation: glitch2 3s infinite;
-    clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
-  }
-
-  @keyframes glitch1 {
-    0%, 90%, 100% { transform: none; opacity: 1; }
-    91% { transform: translate(-3px, 1px); opacity: 0.8; }
-    93% { transform: translate(3px, -1px); opacity: 0.8; }
-    95% { transform: translate(-2px, 2px); opacity: 0.8; }
-    97% { transform: none; opacity: 1; }
-  }
-  @keyframes glitch2 {
-    0%, 90%, 100% { transform: none; opacity: 1; }
-    92% { transform: translate(3px, 2px); opacity: 0.8; }
-    94% { transform: translate(-3px, -1px); opacity: 0.8; }
-    96% { transform: translate(2px, -2px); opacity: 0.8; }
-    98% { transform: none; opacity: 1; }
-  }
+  .glitch { position: relative; }
+  .glitch::before, .glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
+  .glitch::before { color: var(--magenta); animation: glitch1 4s infinite; clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%); }
+  .glitch::after  { color: var(--cyan);    animation: glitch2 4s infinite; clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%); }
+  @keyframes glitch1 { 0%,90%,100%{transform:none;opacity:1}91%{transform:translate(-3px,1px);opacity:.8}93%{transform:translate(3px,-1px);opacity:.8}95%{transform:translate(-2px,2px);opacity:.8} }
+  @keyframes glitch2 { 0%,90%,100%{transform:none;opacity:1}92%{transform:translate(3px,2px);opacity:.8}94%{transform:translate(-3px,-1px);opacity:.8}96%{transform:translate(2px,-2px);opacity:.8} }
+  @keyframes flicker { 0%,95%,100%{opacity:1}96%{opacity:.85}97%{opacity:1}98%{opacity:.7}99%{opacity:1} }
+  @keyframes fadeIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
+  @keyframes pulse { 0%,100%{opacity:.4}50%{opacity:1} }
 
   /* ── HERO ── */
   .hero {
-    position: relative;
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    padding: 0 80px;
-    z-index: 1;
-    overflow: hidden;
+    position: relative; min-height: 100vh;
+    display: flex; flex-direction: column; justify-content: center;
+    padding: 80px; z-index: 1; overflow: hidden;
+    animation: flicker 9s infinite;
   }
-
   .hero-bg {
-    position: absolute;
-    inset: 0;
-    background:
-      radial-gradient(ellipse 60% 80% at 80% 50%, rgba(0,245,255,0.06) 0%, transparent 70%),
-      radial-gradient(ellipse 40% 60% at 10% 80%, rgba(255,0,170,0.08) 0%, transparent 60%);
+    position: absolute; inset: 0;
+    background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(0,245,255,0.06) 0%, transparent 70%),
+                radial-gradient(ellipse 40% 60% at 10% 80%, rgba(255,0,170,0.08) 0%, transparent 60%);
     z-index: 0;
   }
+  .corner-bracket { position: absolute; width: 24px; height: 24px; z-index: 2; }
+  .corner-bracket.tl { top:20px; left:60px; border-top:2px solid var(--cyan); border-left:2px solid var(--cyan); }
+  .corner-bracket.tr { top:20px; right:60px; border-top:2px solid var(--cyan); border-right:2px solid var(--cyan); }
+  .corner-bracket.bl { bottom:20px; left:60px; border-bottom:2px solid var(--cyan); border-left:2px solid var(--cyan); }
+  .corner-bracket.br { bottom:20px; right:60px; border-bottom:2px solid var(--cyan); border-right:2px solid var(--cyan); }
+  .hero-corner { position: absolute; font-family: var(--font-mono); font-size: 11px; color: var(--muted); z-index: 2; }
+  .hero-corner.tl { top:32px; left:80px; }
+  .hero-corner.tr { top:32px; right:80px; text-align:right; }
+  .hero-corner.bl { bottom:32px; left:80px; }
+  .hero-corner.br { bottom:32px; right:80px; text-align:right; }
 
-  .hero-corner {
-    position: absolute;
-    font-family: 'Share Tech Mono', 'Courier New', Courier, monospace;
-    font-size: 11px;
-    color: var(--muted);
-    z-index: 2;
-  }
-  .hero-corner.tl { top: 32px; left: 80px; }
-  .hero-corner.tr { top: 32px; right: 80px; text-align: right; }
-  .hero-corner.bl { bottom: 32px; left: 80px; }
-  .hero-corner.br { bottom: 32px; right: 80px; text-align: right; }
-
-  /* corner brackets */
-  .corner-bracket {
-    position: absolute;
-    width: 24px; height: 24px;
-    z-index: 2;
-  }
-  .corner-bracket.tl { top: 20px; left: 60px; border-top: 2px solid var(--cyan); border-left: 2px solid var(--cyan); }
-  .corner-bracket.tr { top: 20px; right: 60px; border-top: 2px solid var(--cyan); border-right: 2px solid var(--cyan); }
-  .corner-bracket.bl { bottom: 20px; left: 60px; border-bottom: 2px solid var(--cyan); border-left: 2px solid var(--cyan); }
-  .corner-bracket.br { bottom: 20px; right: 60px; border-bottom: 2px solid var(--cyan); border-right: 2px solid var(--cyan); }
-
-  .hero-id {
-    position: relative;
-    z-index: 2;
-    font-family: 'Share Tech Mono', 'Courier New', Courier, monospace;
-    font-size: 12px;
-    color: var(--cyan);
-    letter-spacing: 0.3em;
-    margin-bottom: 20px;
-    opacity: 0;
-    animation: fadeIn 0.5s ease 0.3s forwards;
-  }
-
+  .hero-id { position:relative; z-index:2; font-family:var(--font-mono); font-size:12px; color:var(--cyan); letter-spacing:.3em; margin-bottom:20px; opacity:0; animation:fadeIn .5s ease .3s forwards; }
   .hero-id span { color: var(--magenta); }
-
-  .hero-name {
-    position: relative;
-    z-index: 2;
-    font-family: 'Orbitron', 'Arial Black', Impact, sans-serif;
-    font-size: clamp(48px, 8vw, 110px);
-    font-weight: 900;
-    line-height: 0.9;
-    color: #fff;
-    text-transform: uppercase;
-    letter-spacing: -0.02em;
-    opacity: 0;
-    animation: fadeIn 0.6s ease 0.5s forwards;
-  }
-
-  .hero-name .line2 {
-    display: block;
-    color: transparent;
-    -webkit-text-stroke: 1px var(--cyan);
-    text-shadow: 0 0 30px rgba(0,245,255,0.4);
-  }
-
-  .hero-subtitle {
-    position: relative;
-    z-index: 2;
-    margin-top: 24px;
-    font-family: 'Share Tech Mono', 'Courier New', Courier, monospace;
-    font-size: 14px;
-    color: var(--magenta);
-    letter-spacing: 0.2em;
-    opacity: 0;
-    animation: fadeIn 0.6s ease 0.7s forwards;
-  }
-
-  .hero-subtitle::before { content: '> '; color: var(--green); }
-
-  .hero-stats {
-    position: relative;
-    z-index: 2;
-    display: flex;
-    gap: 48px;
-    margin-top: 56px;
-    opacity: 0;
-    animation: fadeIn 0.6s ease 0.9s forwards;
-  }
-
-  .stat-box {
-    border: 1px solid rgba(0,245,255,0.25);
-    padding: 16px 24px;
-    position: relative;
-    background: rgba(0,245,255,0.03);
-    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
-  }
-
-  .stat-box::before {
-    content: '';
-    position: absolute;
-    top: -1px; left: -1px; right: -1px; bottom: -1px;
-    background: linear-gradient(135deg, var(--cyan), transparent 50%);
-    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
-    z-index: -1;
-    opacity: 0.3;
-  }
-
-  .stat-num {
-    font-family: 'Orbitron', 'Arial Black', Impact, sans-serif;
-    font-size: 36px;
-    font-weight: 700;
-    color: var(--cyan);
-    display: block;
-    text-shadow: 0 0 20px rgba(0,245,255,0.6);
-  }
-
-  .stat-label {
-    font-family: 'Share Tech Mono', 'Courier New', Courier, monospace;
-    font-size: 10px;
-    letter-spacing: 0.15em;
-    color: var(--muted);
-    text-transform: uppercase;
-  }
-
-  .hero-scroll {
-    position: absolute;
-    bottom: 48px;
-    left: 50%;
-    transform: translateX(-50%);
-    z-index: 2;
-    font-family: 'Share Tech Mono', 'Courier New', Courier, monospace;
-    font-size: 10px;
-    letter-spacing: 0.2em;
-    color: var(--muted);
-    text-align: center;
-    animation: pulse 2s ease infinite;
-  }
-
-  @keyframes pulse {
-    0%, 100% { opacity: 0.4; }
-    50% { opacity: 1; }
-  }
+  .hero-name { position:relative; z-index:2; font-family:var(--font-display); font-size:clamp(48px,8vw,110px); font-weight:900; line-height:.9; color:#fff; text-transform:uppercase; letter-spacing:-.02em; opacity:0; animation:fadeIn .6s ease .5s forwards; }
+  .hero-name .line2 { display:block; color:transparent; -webkit-text-stroke:1px var(--cyan); text-shadow:0 0 30px rgba(0,245,255,.4); }
+  .hero-subtitle { position:relative; z-index:2; margin-top:24px; font-family:var(--font-mono); font-size:13px; color:var(--magenta); letter-spacing:.2em; opacity:0; animation:fadeIn .6s ease .7s forwards; }
+  .hero-subtitle::before { content:'> '; color:var(--green); }
+  .hero-stats { position:relative; z-index:2; display:flex; gap:20px; margin-top:52px; flex-wrap:wrap; opacity:0; animation:fadeIn .6s ease .9s forwards; }
+  .stat-box { border:1px solid rgba(0,245,255,.25); padding:14px 22px; background:rgba(0,245,255,.03); clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px)); }
+  .stat-num { font-family:var(--font-display); font-size:32px; font-weight:700; color:var(--cyan); display:block; text-shadow:0 0 20px rgba(0,245,255,.6); }
+  .stat-label { font-family:var(--font-mono); font-size:10px; letter-spacing:.15em; color:var(--muted); text-transform:uppercase; }
+  .hero-scroll { position:absolute; bottom:48px; left:50%; transform:translateX(-50%); z-index:2; font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; color:var(--muted); animation:pulse 2s ease infinite; }
 
   /* ── NAV ── */
-  nav {
-    position: sticky;
-    top: 0;
-    z-index: 100;
-    background: rgba(5,8,16,0.92);
-    backdrop-filter: blur(16px);
-    border-bottom: 1px solid rgba(0,245,255,0.15);
-    display: flex;
-    align-items: center;
-    padding: 0 48px;
-    gap: 0;
-  }
-
-  .nav-logo {
-    font-family: 'Orbitron', 'Arial Black', Impact, sans-serif;
-    font-size: 12px;
-    font-weight: 700;
-    color: var(--cyan);
-    letter-spacing: 0.2em;
-    margin-right: auto;
-    text-shadow: 0 0 10px rgba(0,245,255,0.5);
-  }
-
-  nav a {
-    font-family: 'Share Tech Mono', 'Courier New', Courier, monospace;
-    font-size: 11px;
-    letter-spacing: 0.2em;
-    text-transform: uppercase;
-    color: var(--muted);
-    text-decoration: none;
-    padding: 18px 24px;
-    transition: color 0.2s;
-    position: relative;
-  }
-
-  nav a::before {
-    content: '//';
-    color: var(--magenta);
-    margin-right: 6px;
-    opacity: 0;
-    transition: opacity 0.2s;
-  }
-
-  nav a:hover { color: var(--cyan); }
-  nav a:hover::before { opacity: 1; }
+  nav { position:sticky; top:0; z-index:100; background:rgba(5,8,16,.95); backdrop-filter:blur(16px); border-bottom:1px solid rgba(0,245,255,.15); display:flex; align-items:center; padding:0 48px; }
+  .nav-logo { font-family:var(--font-display); font-size:12px; font-weight:700; color:var(--cyan); letter-spacing:.2em; margin-right:auto; text-shadow:0 0 10px rgba(0,245,255,.5); }
+  nav a { font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); text-decoration:none; padding:18px 20px; transition:color .2s; position:relative; }
+  nav a::before { content:'//'; color:var(--magenta); margin-right:6px; opacity:0; transition:opacity .2s; }
+  nav a:hover { color:var(--cyan); }
+  nav a:hover::before { opacity:1; }
 
   /* ── SECTIONS ── */
-  section {
-    position: relative;
-    z-index: 1;
-    padding: 100px 80px;
-    opacity: 0;
-    transform: translateY(20px);
-    transition: opacity 0.6s ease, transform 0.6s ease;
-  }
+  section { position:relative; z-index:1; padding:100px 80px; opacity:0; transform:translateY(20px); transition:opacity .6s ease,transform .6s ease; }
+  section.visible { opacity:1; transform:none; }
+  .section-header { margin-bottom:52px; }
+  .section-id { font-family:var(--font-mono); font-size:11px; color:var(--magenta); letter-spacing:.3em; margin-bottom:12px; }
+  .section-title { font-family:var(--font-display); font-size:clamp(28px,4vw,48px); font-weight:700; color:#fff; text-transform:uppercase; letter-spacing:.05em; display:inline-block; }
+  .section-title::after { content:''; display:block; margin-top:12px; height:2px; background:linear-gradient(90deg,var(--cyan),var(--magenta),transparent); }
 
-  section.visible { opacity: 1; transform: none; }
+  /* ── EXP ── */
+  #experience { background:var(--bg); }
+  .exp-group { margin-bottom:40px; }
+  .exp-group-label { font-family:var(--font-mono); font-size:10px; letter-spacing:.25em; text-transform:uppercase; color:var(--bg); background:var(--cyan); display:inline-block; padding:3px 14px; margin-bottom:1px; }
+  .exp-group-label.mag { background:var(--magenta); }
 
-  .section-header {
-    margin-bottom: 64px;
-  }
-
-  .section-id {
-    font-family: 'Share Tech Mono', 'Courier New', Courier, monospace;
-    font-size: 11px;
-    color: var(--magenta);
-    letter-spacing: 0.3em;
-    margin-bottom: 12px;
-  }
-
-  .section-title {
-    font-family: 'Orbitron', 'Arial Black', Impact, sans-serif;
-    font-size: clamp(28px, 4vw, 48px);
-    font-weight: 700;
-    color: #fff;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    position: relative;
-    display: inline-block;
-  }
-
-  .section-title::after {
-    content: '';
-    display: block;
-    margin-top: 12px;
-    height: 2px;
-    background: linear-gradient(90deg, var(--cyan), var(--magenta), transparent);
-  }
-
-  /* ── EXPERIENCE ── */
-  #experience { background: var(--bg); }
-
-  .exp-list { display: grid; gap: 2px; }
-
-  .exp-item {
-    display: grid;
-    grid-template-columns: 220px 1fr;
-    border-top: 1px solid rgba(0,245,255,0.1);
-    padding: 36px 0;
-    gap: 0;
-    transition: background 0.2s;
-    position: relative;
-  }
-
-  .exp-item:last-child { border-bottom: 1px solid rgba(0,245,255,0.1); }
-
-  .exp-item::before {
-    content: '';
-    position: absolute;
-    left: -80px; right: -80px; top: 0; bottom: 0;
-    background: rgba(0,245,255,0.02);
-    opacity: 0;
-    transition: opacity 0.25s;
-  }
-
-  .exp-item:hover::before { opacity: 1; }
-
-  .exp-left {
-    padding-right: 32px;
-    padding-top: 4px;
-  }
-
-  .exp-period {
-    font-family: 'Share Tech Mono', 'Courier New', Courier, monospace;
-    font-size: 11px;
-    color: var(--cyan);
-    letter-spacing: 0.1em;
-    margin-bottom: 8px;
-  }
-
-  .exp-co {
-    font-family: 'Share Tech Mono', 'Courier New', Courier, monospace;
-    font-size: 10px;
-    color: var(--muted);
-    letter-spacing: 0.12em;
-    text-transform: uppercase;
-  }
-
-  .exp-role {
-    font-family: 'Orbitron', 'Arial Black', Impact, sans-serif;
-    font-size: 16px;
-    font-weight: 700;
-    color: #fff;
-    margin-bottom: 6px;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    line-height: 1.3;
-  }
-
-  .exp-program {
-    font-family: 'Share Tech Mono', 'Courier New', Courier, monospace;
-    font-size: 11px;
-    color: var(--magenta);
-    letter-spacing: 0.1em;
-    margin-bottom: 12px;
-  }
-
-  .exp-desc {
-    font-size: 14px;
-    color: #7a9ab8;
-    line-height: 1.7;
-    max-width: 600px;
-  }
-
-  .exp-tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    margin-top: 16px;
-  }
-
-  .exp-tag {
-    font-family: 'Share Tech Mono', 'Courier New', Courier, monospace;
-    font-size: 10px;
-    letter-spacing: 0.08em;
-    color: var(--cyan);
-    border: 1px solid rgba(0,245,255,0.3);
-    padding: 3px 10px;
-    text-transform: uppercase;
-    clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
-    background: rgba(0,245,255,0.05);
-  }
+  .exp-item { display:grid; grid-template-columns:220px 1fr; border-top:1px solid rgba(0,245,255,.08); border-left:2px solid rgba(0,245,255,.12); padding:28px 0 28px 24px; margin-bottom:2px; position:relative; transition:border-color .2s,background .2s; }
+  .exp-item:hover { border-left-color:var(--cyan); background:rgba(0,245,255,.015); }
+  .exp-left { padding-right:28px; padding-top:2px; }
+  .exp-period { font-family:var(--font-mono); font-size:11px; color:var(--cyan); letter-spacing:.1em; margin-bottom:6px; }
+  .exp-co { font-family:var(--font-mono); font-size:10px; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; line-height:1.5; }
+  .exp-role { font-family:var(--font-display); font-size:14px; font-weight:700; color:#fff; margin-bottom:4px; text-transform:uppercase; letter-spacing:.04em; line-height:1.3; }
+  .exp-program { font-family:var(--font-mono); font-size:11px; color:var(--magenta); letter-spacing:.1em; margin-bottom:10px; }
+  .exp-objective { font-family:var(--font-mono); font-size:11px; color:var(--muted); border-left:2px solid rgba(0,245,255,.2); padding-left:10px; margin-bottom:10px; line-height:1.6; }
+  .exp-objective strong { color:var(--cyan); }
+  .exp-desc { font-size:14px; color:#7a9ab8; line-height:1.7; max-width:640px; }
+  .exp-results { margin-top:12px; padding:12px 16px; border:1px solid rgba(0,255,136,.2); background:rgba(0,255,136,.03); clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%); }
+  .exp-results-title { font-family:var(--font-mono); font-size:10px; color:var(--green); letter-spacing:.2em; margin-bottom:6px; }
+  .exp-results ul { list-style:none; }
+  .exp-results ul li { font-size:13px; color:#8abba0; padding:2px 0; }
+  .exp-results ul li::before { content:'+ '; color:var(--green); }
+  .exp-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
+  .exp-tag { font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; color:var(--cyan); border:1px solid rgba(0,245,255,.3); padding:3px 10px; text-transform:uppercase; clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%); background:rgba(0,245,255,.05); }
+  .exp-tag.mag { color:var(--magenta); border-color:rgba(255,0,170,.3); background:rgba(255,0,170,.05); }
+  .exp-tag.grn { color:var(--green); border-color:rgba(0,255,136,.3); background:rgba(0,255,136,.05); }
 
   /* ── SKILLS ── */
-  #competences { background: var(--bg2); }
-
-  .skills-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 32px;
-  }
-
-  .skill-panel {
-    border: 1px solid rgba(0,245,255,0.12);
-    padding: 28px;
-    background: rgba(0,245,255,0.02);
-    position: relative;
-    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
-  }
-
-  .skill-panel::before {
-    content: '';
-    position: absolute;
-    top: 0; right: 0;
-    width: 0; height: 0;
-    border-top: 16px solid rgba(0,245,255,0.3);
-    border-left: 16px solid transparent;
-  }
-
-  .skill-panel-title {
-    font-family: 'Orbitron', 'Arial Black', Impact, sans-serif;
-    font-size: 11px;
-    font-weight: 700;
-    color: var(--magenta);
-    letter-spacing: 0.2em;
-    text-transform: uppercase;
-    margin-bottom: 24px;
-    padding-bottom: 12px;
-    border-bottom: 1px solid rgba(255,0,170,0.2);
-  }
-
-  .skill-row {
-    margin-bottom: 18px;
-  }
-
-  .skill-info {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 6px;
-  }
-
-  .skill-name {
-    font-family: 'Rajdhani', 'Segoe UI', Arial, sans-serif;
-    font-size: 13px;
-    font-weight: 600;
-    color: var(--text);
-    letter-spacing: 0.05em;
-  }
-
-  .skill-meta {
-    font-family: 'Share Tech Mono', 'Courier New', Courier, monospace;
-    font-size: 10px;
-    color: var(--muted);
-  }
-
-  .skill-bar {
-    height: 3px;
-    background: rgba(255,255,255,0.06);
-    position: relative;
-    overflow: visible;
-  }
-
-  .skill-fill {
-    height: 100%;
-    width: 0;
-    background: linear-gradient(90deg, var(--cyan), var(--green));
-    box-shadow: 0 0 8px var(--cyan);
-    transition: width 1.4s cubic-bezier(0.4,0,0.2,1);
-    position: relative;
-  }
-
-  .skill-fill::after {
-    content: '';
-    position: absolute;
-    right: -1px; top: -3px;
-    width: 2px; height: 9px;
-    background: #fff;
-    box-shadow: 0 0 6px var(--cyan);
-  }
+  #competences { background:var(--bg2); }
+  .skills-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
+  .skill-panel { border:1px solid rgba(0,245,255,.12); padding:28px; background:rgba(0,245,255,.02); position:relative; clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%); }
+  .skill-panel::before { content:''; position:absolute; top:0; right:0; width:0; height:0; border-top:16px solid rgba(0,245,255,.3); border-left:16px solid transparent; }
+  .skill-panel-title { font-family:var(--font-display); font-size:11px; font-weight:700; color:var(--magenta); letter-spacing:.2em; text-transform:uppercase; margin-bottom:24px; padding-bottom:12px; border-bottom:1px solid rgba(255,0,170,.2); }
+  .skill-row { margin-bottom:16px; }
+  .skill-info { display:flex; justify-content:space-between; margin-bottom:6px; }
+  .skill-name { font-family:var(--font-body); font-size:13px; font-weight:600; color:var(--text); letter-spacing:.05em; }
+  .skill-meta { font-family:var(--font-mono); font-size:10px; color:var(--muted); }
+  .skill-bar { height:3px; background:rgba(255,255,255,.06); }
+  .skill-fill { height:100%; width:0; background:linear-gradient(90deg,var(--cyan),var(--green)); box-shadow:0 0 8px var(--cyan); transition:width 1.4s cubic-bezier(.4,0,.2,1); position:relative; }
+  .skill-fill::after { content:''; position:absolute; right:-1px; top:-3px; width:2px; height:9px; background:#fff; box-shadow:0 0 6px var(--cyan); }
 
   /* ── SECTORS ── */
-  #secteurs { background: var(--bg); }
-
-  .sectors-grid {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 2px;
-  }
-
-  .sector-cell {
-    border: 1px solid rgba(0,245,255,0.08);
-    padding: 20px 24px;
-    font-family: 'Rajdhani', 'Segoe UI', Arial, sans-serif;
-    font-size: 15px;
-    font-weight: 600;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    color: var(--muted);
-    transition: all 0.2s;
-    cursor: default;
-    position: relative;
-    overflow: hidden;
-  }
-
-  .sector-cell::before {
-    content: '◈';
-    margin-right: 10px;
-    color: var(--magenta);
-    font-size: 10px;
-  }
-
-  .sector-cell::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(135deg, rgba(0,245,255,0.07), transparent);
-    opacity: 0;
-    transition: opacity 0.25s;
-  }
-
-  .sector-cell:hover {
-    color: var(--cyan);
-    border-color: rgba(0,245,255,0.4);
-  }
-
-  .sector-cell:hover::after { opacity: 1; }
+  #secteurs { background:var(--bg); }
+  .sectors-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; }
+  .sector-cell { border:1px solid rgba(0,245,255,.08); padding:16px 18px; font-family:var(--font-body); font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); transition:all .2s; cursor:default; }
+  .sector-cell::before { content:'◈'; margin-right:8px; color:var(--magenta); font-size:9px; }
+  .sector-cell:hover { color:var(--cyan); border-color:rgba(0,245,255,.4); background:rgba(0,245,255,.03); }
 
   /* ── FORMATION ── */
-  #formation { background: var(--bg2); }
-
-  .edu-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 24px;
-    margin-bottom: 48px;
-  }
-
-  .edu-card {
-    border: 1px solid rgba(0,245,255,0.15);
-    padding: 32px;
-    background: rgba(0,245,255,0.03);
-    position: relative;
-    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
-  }
-
-  .edu-card::before {
-    content: '';
-    position: absolute;
-    top: 0; right: 0;
-    width: 0; height: 0;
-    border-top: 20px solid rgba(0,245,255,0.4);
-    border-left: 20px solid transparent;
-  }
-
-  .edu-year {
-    font-family: 'Share Tech Mono', 'Courier New', Courier, monospace;
-    font-size: 11px;
-    color: var(--magenta);
-    letter-spacing: 0.2em;
-    margin-bottom: 12px;
-  }
-
-  .edu-degree {
-    font-family: 'Orbitron', 'Arial Black', Impact, sans-serif;
-    font-size: 17px;
-    font-weight: 700;
-    color: #fff;
-    margin-bottom: 8px;
-    text-transform: uppercase;
-  }
-
-  .edu-school {
-    font-family: 'Share Tech Mono', 'Courier New', Courier, monospace;
-    font-size: 12px;
-    color: var(--muted);
-  }
-
-  .certs-title {
-    font-family: 'Orbitron', 'Arial Black', Impact, sans-serif;
-    font-size: 12px;
-    color: var(--cyan);
-    letter-spacing: 0.2em;
-    margin-bottom: 20px;
-    text-transform: uppercase;
-  }
-
-  .certs-grid {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-  }
-
-  .cert-chip {
-    font-family: 'Share Tech Mono', 'Courier New', Courier, monospace;
-    font-size: 11px;
-    letter-spacing: 0.1em;
-    color: var(--green);
-    border: 1px solid rgba(0,255,136,0.25);
-    padding: 6px 14px;
-    background: rgba(0,255,136,0.04);
-    text-transform: uppercase;
-  }
+  #formation { background:var(--bg2); }
+  .edu-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:48px; }
+  .edu-card { border:1px solid rgba(0,245,255,.15); padding:32px; background:rgba(0,245,255,.03); position:relative; clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%); }
+  .edu-card::before { content:''; position:absolute; top:0; right:0; width:0; height:0; border-top:20px solid rgba(0,245,255,.4); border-left:20px solid transparent; }
+  .edu-year { font-family:var(--font-mono); font-size:11px; color:var(--magenta); letter-spacing:.2em; margin-bottom:12px; }
+  .edu-degree { font-family:var(--font-display); font-size:16px; font-weight:700; color:#fff; margin-bottom:6px; text-transform:uppercase; }
+  .edu-school { font-family:var(--font-mono); font-size:11px; color:var(--muted); line-height:1.7; }
+  .certs-title { font-family:var(--font-display); font-size:12px; color:var(--cyan); letter-spacing:.2em; margin-bottom:20px; text-transform:uppercase; }
+  .certs-grid { display:flex; flex-wrap:wrap; gap:10px; }
+  .cert-chip { font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:var(--green); border:1px solid rgba(0,255,136,.25); padding:6px 14px; background:rgba(0,255,136,.04); text-transform:uppercase; }
 
   /* ── FOOTER ── */
-  footer {
-    position: relative;
-    z-index: 1;
-    background: var(--bg);
-    border-top: 1px solid rgba(0,245,255,0.15);
-    padding: 48px 80px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
+  footer { position:relative; z-index:1; background:var(--bg); border-top:1px solid rgba(0,245,255,.15); padding:48px 80px; display:flex; justify-content:space-between; align-items:center; }
+  .footer-name { font-family:var(--font-display); font-size:20px; font-weight:900; color:var(--cyan); text-shadow:0 0 20px rgba(0,245,255,.5); letter-spacing:.1em; }
+  .footer-info { font-family:var(--font-mono); font-size:11px; color:var(--muted); text-align:right; line-height:1.8; }
 
-  .footer-name {
-    font-family: 'Orbitron', 'Arial Black', Impact, sans-serif;
-    font-size: 20px;
-    font-weight: 900;
-    color: var(--cyan);
-    text-shadow: 0 0 20px rgba(0,245,255,0.5);
-    letter-spacing: 0.1em;
-  }
+  .cursor-dot { position:fixed; width:8px; height:8px; background:var(--cyan); border-radius:50%; pointer-events:none; z-index:10000; transform:translate(-50%,-50%); box-shadow:0 0 10px var(--cyan),0 0 20px rgba(0,245,255,.5); }
 
-  .footer-info {
-    font-family: 'Share Tech Mono', 'Courier New', Courier, monospace;
-    font-size: 11px;
-    color: var(--muted);
-    text-align: right;
-    line-height: 1.8;
-  }
-
-  /* ── NEON CURSOR dot ── */
-  .cursor-dot {
-    position: fixed;
-    width: 8px; height: 8px;
-    background: var(--cyan);
-    border-radius: 50%;
-    pointer-events: none;
-    z-index: 10000;
-    transform: translate(-50%, -50%);
-    box-shadow: 0 0 10px var(--cyan), 0 0 20px rgba(0,245,255,0.5);
-    transition: transform 0.05s;
-  }
-
-  /* ── FLICKER ── */
-  @keyframes flicker {
-    0%, 96%, 100% { opacity: 1; }
-    97% { opacity: 0.7; }
-    98% { opacity: 1; }
-    99% { opacity: 0.6; }
-  }
-
-  .hero { animation: flicker 8s infinite; }
-
-  @keyframes fadeIn {
-    from { opacity: 0; transform: translateY(12px); }
-    to { opacity: 1; transform: none; }
-  }
-
-  /* ── RESPONSIVE ── */
-  @media (max-width: 900px) {
-    section, .hero, footer { padding-left: 24px; padding-right: 24px; }
-    .hero-stats { flex-wrap: wrap; gap: 16px; }
-    .exp-item { grid-template-columns: 1fr; }
-    .exp-left { margin-bottom: 12px; }
-    .skills-grid { grid-template-columns: 1fr; }
-    .sectors-grid { grid-template-columns: 1fr 1fr; }
-    .edu-grid { grid-template-columns: 1fr; }
-    .hero-corner.tr, .hero-corner.br { display: none; }
-    nav { padding: 0 16px; }
-    .nav-logo { font-size: 10px; }
-    nav a { padding: 14px 12px; font-size: 10px; }
+  @media (max-width:900px) {
+    section, .hero, footer { padding-left:24px; padding-right:24px; }
+    .exp-item { grid-template-columns:1fr; }
+    .exp-left { margin-bottom:10px; }
+    .skills-grid, .sectors-grid, .edu-grid { grid-template-columns:1fr; }
+    .hero-corner.tr, .hero-corner.br { display:none; }
+    nav { padding:0 16px; flex-wrap:wrap; }
+    nav a { padding:12px 12px; font-size:10px; }
   }
 </style>
 </head>
 <body>
-
 <div class="cursor-dot" id="cursorDot"></div>
 
-<!-- HERO -->
 <header class="hero">
   <div class="hero-bg"></div>
-
-  <div class="corner-bracket tl"></div>
-  <div class="corner-bracket tr"></div>
-  <div class="corner-bracket bl"></div>
-  <div class="corner-bracket br"></div>
-
-  <div class="hero-corner tl">SYS://CV_LIABEUF_V2.EXE<br>STATUS: <span style="color:var(--green)">ONLINE</span></div>
+  <div class="corner-bracket tl"></div><div class="corner-bracket tr"></div>
+  <div class="corner-bracket bl"></div><div class="corner-bracket br"></div>
+  <div class="hero-corner tl">SYS://CV_LIABEUF_V3.EXE<br>STATUS: <span style="color:var(--green)">ONLINE</span></div>
   <div class="hero-corner tr">CGI GROUP // CLERMONT-FERRAND<br>CLEARANCE: <span style="color:var(--magenta)">LEVEL_4</span></div>
-  <div class="hero-corner bl">// 20+ ANS D'EXPÉRIENCE DIGITALE</div>
-  <div class="hero-corner br">ENISE_1999 // INGÉNIEUR</div>
-
-  <p class="hero-id">ID: <span>#SL-2024</span> // MODULE: <span>DIGITAL_DIRECTOR</span> // NODE: <span>CGI.FR</span></p>
-
-  <h1 class="hero-name glitch" data-text="LIABEUF">
-    LIABEUF<br>
-    <span class="line2">STÉPHANE</span>
-  </h1>
-
-  <p class="hero-subtitle">UX &amp; DIGITAL MANAGER // DIRECTEUR CONSEIL // E-COMMERCE ARCHITECT</p>
+  <div class="hero-corner bl">// 25 ANS D'EXPÉRIENCE DIGITALE</div>
+  <div class="hero-corner br">ENISE_1999 // INGÉNIEUR · CENTRALE LYON</div>
 
+  <p class="hero-id">ID: <span>#SL-2025</span> // MODULE: <span>DIGITAL_DIRECTOR</span> // NODE: <span>CGI.FR</span></p>
+  <h1 class="hero-name glitch" data-text="LIABEUF">LIABEUF<br><span class="line2">STÉPHANE</span></h1>
+  <p class="hero-subtitle">UX &amp; DIGITAL MANAGER // PRODUCT MANAGER // E-COMMERCE ARCHITECT // DATA LEADER</p>
   <div class="hero-stats">
-    <div class="stat-box">
-      <strong class="stat-num">20+</strong>
-      <span class="stat-label">ANS XP</span>
-    </div>
-    <div class="stat-box">
-      <strong class="stat-num">40</strong>
-      <span class="stat-label">SQUADS</span>
-    </div>
-    <div class="stat-box">
-      <strong class="stat-num">39</strong>
-      <span class="stat-label">PAYS</span>
-    </div>
-    <div class="stat-box">
-      <strong class="stat-num">25</strong>
-      <span class="stat-label">LANGUES</span>
-    </div>
+    <div class="stat-box"><strong class="stat-num">25+</strong><span class="stat-label">ANS XP</span></div>
+    <div class="stat-box"><strong class="stat-num">40</strong><span class="stat-label">SQUADS</span></div>
+    <div class="stat-box"><strong class="stat-num">39</strong><span class="stat-label">PAYS</span></div>
+    <div class="stat-box"><strong class="stat-num">×2</strong><span class="stat-label">CONV. RATE</span></div>
+    <div class="stat-box"><strong class="stat-num">+70%</strong><span class="stat-label">CA E-COM</span></div>
   </div>
-
   <div class="hero-scroll">[ SCROLL_DOWN ] ↓</div>
 </header>
 
-<!-- NAV -->
 <nav>
-  <span class="nav-logo">SL://CV</span>
+  <span class="nav-logo">SL://CV_2025</span>
   <a href="#experience">Parcours</a>
   <a href="#competences">Skills</a>
   <a href="#secteurs">Secteurs</a>
   <a href="#formation">Formation</a>
 </nav>
 
-<!-- EXPERIENCE -->
 <section id="experience">
   <div class="section-header">
     <p class="section-id">// MODULE_01 :: EXPERIENCE.LOG</p>
     <h2 class="section-title">Parcours</h2>
   </div>
 
-  <div class="exp-list">
+  <div class="exp-group">
+    <div class="exp-group-label">CGI // DIRECTEUR CONSEIL SERVICE</div>
 
     <div class="exp-item">
-      <div class="exp-left">
-        <p class="exp-period">2021 → NOW</p>
-        <p class="exp-co">CGI · Clermont-Ferrand</p>
-      </div>
+      <div class="exp-left"><p class="exp-period">MAI 2025 → NOW</p><p class="exp-co">Limagrain Europe<br>Field Seeds Division</p></div>
       <div>
-        <h3 class="exp-role">Directeur Conseil<br>UX &amp; Digital Manager</h3>
-        <p class="exp-desc">Développement de l'offre UX/UI sur le marché de Clermont-Ferrand. Accompagnement du déploiement UX/UI au sein des business units Michelin, mise en œuvre de KPIs pour évaluer la progression et améliorer l'expérience utilisateur final.</p>
+        <h3 class="exp-role">Product Manager &amp; UX Designer</h3>
+        <p class="exp-program">// PLATEFORME BI &amp; CRM — PILOTAGE COMMERCIAL EUROPÉEN</p>
+        <div class="exp-objective"><strong>RÔLE :</strong> Transformation digitale du pôle Field Seeds — écosystème de tableaux de bord unifiés (Power BI + CRM Dynamics) pour piloter les performances commerciales, marketing et terrain à l'échelle européenne.</div>
+        <p class="exp-desc">Roadmap produit LFS, conception UX/UI (wireframes, maquettes, guidelines), ateliers Design Thinking avec équipes sales / marketing / CRM / data. KPIs par profil utilisateur (Comex, Country Managers, Sales Managers, commerciaux). Gouvernance Scrum : backlog, rituels Sprint, cadencement trimestriel, coaching des équipes Data et CRM.</p>
         <div class="exp-tags">
-          <span class="exp-tag">UX/UI</span>
-          <span class="exp-tag">KPIs</span>
-          <span class="exp-tag">Michelin</span>
-          <span class="exp-tag">Business dev</span>
+          <span class="exp-tag">Power BI</span><span class="exp-tag">CRM Dynamics</span><span class="exp-tag">UX/UI</span><span class="exp-tag">Product Manager</span><span class="exp-tag">Scrum</span><span class="exp-tag">Design Thinking</span><span class="exp-tag">KPIs</span>
         </div>
       </div>
     </div>
 
     <div class="exp-item">
-      <div class="exp-left">
-        <p class="exp-period">2019 → 2021</p>
-        <p class="exp-co">CGI · Michelin</p>
+      <div class="exp-left"><p class="exp-period">DÉC 2024 → MAR 2025</p><p class="exp-co">Picture Organic Clothing<br>(mi-temps)</p></div>
+      <div>
+        <h3 class="exp-role">UX Designer</h3>
+        <p class="exp-program">// PROJET BI — POWER BI — FABRIK</p>
+        <p class="exp-desc">Conception de tableaux de bord ergonomiques pour les équipes commerciales, financières et le comité de direction. Guidelines graphiques et ergonomiques. Workshops UX en mode Design Thinking.</p>
+        <div class="exp-tags"><span class="exp-tag">Power BI</span><span class="exp-tag">UX Design</span><span class="exp-tag">Design Thinking</span><span class="exp-tag">Dashboards</span></div>
       </div>
+    </div>
+
+    <div class="exp-item">
+      <div class="exp-left"><p class="exp-period">AVR 2023 → MAR 2025</p><p class="exp-co">Picture Organic Clothing</p></div>
+      <div>
+        <h3 class="exp-role">Directeur de Projet E-Commerce</h3>
+        <p class="exp-program">// REFONTE SITE + INTERNATIONALISATION (7 → 200+ PAYS)</p>
+        <p class="exp-desc">Refonte complète sous Salesforce PWA Kit. Internationalisation de 7 à 200+ pays : multidevise, multilingue, modules taxation/conformité, logistique internationale. Optimisation parcours clients (abandon panier, recherche prédictive, paiement 1 clic). Collaboration étroite design / marketing / IT.</p>
+        <div class="exp-results">
+          <p class="exp-results-title">// RÉSULTATS OBTENUS</p>
+          <ul>
+            <li>Doublement du taux de conversion</li>
+            <li>CA e-commerce +70% en cumulé annuel (YTD)</li>
+            <li>Déploiement dans 200+ pays vs 7 initialement</li>
+            <li>Performances techniques et fluidité navigation optimisées</li>
+          </ul>
+        </div>
+        <div class="exp-tags">
+          <span class="exp-tag">Salesforce PWA</span><span class="exp-tag">E-Commerce</span><span class="exp-tag">200+ pays</span><span class="exp-tag mag">×2 Conversion</span><span class="exp-tag grn">+70% CA</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="exp-item">
+      <div class="exp-left"><p class="exp-period">2021 → NOW</p><p class="exp-co">CGI // Région AURA</p></div>
+      <div>
+        <h3 class="exp-role">UX &amp; Digital Manager</h3>
+        <p class="exp-desc">Développement de l'offre UX/UI sur le marché AURA. Études des besoins clients locaux, adaptation des solutions, renforcement de la notoriété CGI dans la région, création d'opportunités de croissance.</p>
+        <div class="exp-tags"><span class="exp-tag">UX/UI</span><span class="exp-tag">Business Dev</span><span class="exp-tag">Région AURA</span></div>
+      </div>
+    </div>
+
+    <div class="exp-item">
+      <div class="exp-left"><p class="exp-period">2021 → 2023</p><p class="exp-co">Michelin</p></div>
+      <div>
+        <h3 class="exp-role">UX &amp; Digital Manager</h3>
+        <p class="exp-desc">Déploiement UX/UI au sein des business units Michelin. Identification des besoins spécifiques, conception de solutions, implémentation et KPIs UX pour évaluer la progression et optimiser la satisfaction utilisateurs finaux.</p>
+        <div class="exp-tags"><span class="exp-tag">UX/UI</span><span class="exp-tag">KPIs</span><span class="exp-tag">Michelin</span></div>
+      </div>
+    </div>
+
+    <div class="exp-item">
+      <div class="exp-left"><p class="exp-period">2019 → 2021</p><p class="exp-co">Michelin</p></div>
       <div>
         <h3 class="exp-role">Delivery Manager</h3>
         <p class="exp-program">// PROGRAMME ENGAGE — SALESFORCE</p>
-        <p class="exp-desc">Intégration complète des outils et services Michelin dans Salesforce. Pilotage de la planification dans un environnement complexe : ~40 squads sur 3 pays (USA, France, Maroc) en mode agile distribué.</p>
-        <div class="exp-tags">
-          <span class="exp-tag">Salesforce</span>
-          <span class="exp-tag">Agile distrib.</span>
-          <span class="exp-tag">~40 squads</span>
-          <span class="exp-tag">3 pays</span>
-        </div>
+        <p class="exp-desc">Intégration des outils et services Michelin dans Salesforce CRM. Pilotage de ~40 squads sur 3 pays (USA, France, Maroc) en agile distribué. Maîtrise planification et qualité dans un environnement complexe multi-pays.</p>
+        <div class="exp-tags"><span class="exp-tag">Salesforce</span><span class="exp-tag">Agile Distribué</span><span class="exp-tag">~40 Squads</span><span class="exp-tag">3 Pays</span></div>
       </div>
     </div>
 
     <div class="exp-item">
-      <div class="exp-left">
-        <p class="exp-period">2017 → 2019</p>
-        <p class="exp-co">CGI · Michelin</p>
-      </div>
+      <div class="exp-left"><p class="exp-period">2017 → 2019</p><p class="exp-co">Michelin</p></div>
       <div>
-        <h3 class="exp-role">Directeur Projet<br>BI Europe</h3>
+        <h3 class="exp-role">Directeur Projet BI Europe</h3>
         <p class="exp-program">// PROGRAMME ENGAGE — SALESFORCE</p>
-        <p class="exp-desc">Outil BI Europe pour 2 000 commerciaux Michelin dans 39 pays et 25 langues. Pilotage des ventes et commandes jusqu'au SKU, intégré dans Salesforce CRM dans le cadre du programme de transformation customer-centric.</p>
-        <div class="exp-tags">
-          <span class="exp-tag">BI</span>
-          <span class="exp-tag">2000 users</span>
-          <span class="exp-tag">39 pays</span>
-          <span class="exp-tag">25 langues</span>
-          <span class="exp-tag">Salesforce</span>
-        </div>
+        <p class="exp-desc">Outil BI Europe pour 2 000 commerciaux dans 39 pays et 25 langues. Pilotage ventes et commandes jusqu'au SKU, intégré dans Salesforce dans le cadre de la transformation customer-centric Engage.</p>
+        <div class="exp-tags"><span class="exp-tag">Business Intelligence</span><span class="exp-tag">2000 Users</span><span class="exp-tag">39 Pays</span><span class="exp-tag">25 Langues</span><span class="exp-tag">Salesforce</span></div>
       </div>
     </div>
+  </div>
+
+  <div class="exp-group">
+    <div class="exp-group-label mag">PARCOURS AUTRE</div>
 
     <div class="exp-item">
-      <div class="exp-left">
-        <p class="exp-period">2016 → 2017</p>
-        <p class="exp-co">Le Temps des Travaux</p>
-      </div>
+      <div class="exp-left"><p class="exp-period">2016 → 2017</p><p class="exp-co">Le Temps des Travaux<br>Secteur Retail</p></div>
       <div>
         <h3 class="exp-role">Dir. Associé E-Commerce &amp; CTO</h3>
-        <p class="exp-desc">Élaboration du SI, stratégie de marque, refonte complète du site E-Commerce. CA de 450 k€ dès la 1ère année. Stratégie webmarketing, hébergement et sécurité serveur dédié.</p>
-        <div class="exp-tags">
-          <span class="exp-tag">E-Commerce</span>
-          <span class="exp-tag">CTO</span>
-          <span class="exp-tag">450 k€ CA</span>
-          <span class="exp-tag">Webmarketing</span>
-        </div>
+        <p class="exp-desc">Élaboration du SI et stratégie de marque. Refonte complète du site E-Commerce. CA 450 k€ dès la 1ère année. Stratégie webmarketing, hébergement et sécurité serveur dédié.</p>
+        <div class="exp-tags"><span class="exp-tag">CTO</span><span class="exp-tag">E-Commerce</span><span class="exp-tag grn">450 k€ CA</span></div>
       </div>
     </div>
 
     <div class="exp-item">
-      <div class="exp-left">
-        <p class="exp-period">2013 → 2016</p>
-        <p class="exp-co">Trismégiste Intl · vetality.fr</p>
-      </div>
+      <div class="exp-left"><p class="exp-period">2013 → 2016</p><p class="exp-co">Trismégiste International<br>vetality.fr</p></div>
       <div>
         <h3 class="exp-role">Directeur E-Commerce</h3>
-        <p class="exp-desc">Création du pôle E-Commerce de zéro : marque, recrutement, SI, logistique. CA de 900 k€ dès la 1ère année (obj. 1 M€). Rentabilité atteinte au 15e mois (obj. 24 mois).</p>
-        <div class="exp-tags">
-          <span class="exp-tag">Création ex-nihilo</span>
-          <span class="exp-tag">900 k€</span>
-          <span class="exp-tag">Retail</span>
+        <p class="exp-desc">Création du pôle E-Commerce ex-nihilo : marque, recrutement, SI, logistique, webmarketing. CA 900 k€ en 1ère année. Rentabilité atteinte au 15e mois.</p>
+        <div class="exp-results">
+          <p class="exp-results-title">// RÉSULTATS</p>
+          <ul>
+            <li>900 k€ CA 1ère année — objectif 1 M€</li>
+            <li>Rentabilité au 15e mois — objectif 24 mois</li>
+          </ul>
         </div>
+        <div class="exp-tags"><span class="exp-tag">Création ex-nihilo</span><span class="exp-tag grn">900 k€</span><span class="exp-tag">Retail</span></div>
       </div>
     </div>
 
     <div class="exp-item">
-      <div class="exp-left">
-        <p class="exp-period">2010 → 2013</p>
-        <p class="exp-co">Indépendant</p>
-      </div>
+      <div class="exp-left"><p class="exp-period">2010 → 2013</p><p class="exp-co">Indépendant</p></div>
       <div>
         <h3 class="exp-role">Consultant Digital &amp; UX Designer</h3>
-        <p class="exp-desc">Conseil en stratégie digitale, audit &amp; préconisation, webmarketing, social media acquisition, conception digitale et développement.</p>
-        <div class="exp-tags">
-          <span class="exp-tag">Conseil</span>
-          <span class="exp-tag">UX Design</span>
-          <span class="exp-tag">Social Media</span>
-        </div>
+        <p class="exp-desc">Accompagnement de PME et startups dans leur transformation digitale. Audits UX, wireframes, prototypes interactifs, conseil stratégie digitale, SEO, social media. Dev front-end HTML/CSS/JS. Ateliers Design Thinking.</p>
+        <div class="exp-tags"><span class="exp-tag">Conseil</span><span class="exp-tag">UX Design</span><span class="exp-tag">Design Thinking</span><span class="exp-tag">SEO</span></div>
       </div>
     </div>
 
     <div class="exp-item">
-      <div class="exp-left">
-        <p class="exp-period">2005 → 2010</p>
-        <p class="exp-co">Sescoi International (Hexagon)</p>
-      </div>
+      <div class="exp-left"><p class="exp-period">2005 → 2010</p><p class="exp-co">Sescoi International<br>(Hexagon)</p></div>
       <div>
-        <h3 class="exp-role">Resp. Produit ERP<br>Innovation &amp; Industrialisation</h3>
-        <div class="exp-tags"><span class="exp-tag">ERP</span><span class="exp-tag">Product Mgmt</span></div>
+        <h3 class="exp-role">Product Manager &amp; Dir. Innovation &amp; Industrialisation</h3>
+        <p class="exp-desc">Gestion du cycle de vie produit ERP, outils planification et CAD viewer. Roadmap, R&amp;D agile, go-to-market, comités produit. Création cellule industrialisation — CMMI Level 1 → Level 4 en 3 ans (partenariat Mercury). Standardisation des processus dev / tests / déploiement.</p>
+        <div class="exp-tags"><span class="exp-tag">Product Management</span><span class="exp-tag">ERP</span><span class="exp-tag">CMMI L4</span><span class="exp-tag">Innovation</span><span class="exp-tag">Industrialisation</span></div>
       </div>
     </div>
 
     <div class="exp-item">
-      <div class="exp-left">
-        <p class="exp-period">2001 → 2005</p>
-        <p class="exp-co">Sescoi International (Hexagon)</p>
-      </div>
+      <div class="exp-left"><p class="exp-period">2001 → 2005</p><p class="exp-co">Sescoi International<br>(Hexagon)</p></div>
       <div>
-        <h3 class="exp-role">Resp. Dev Scheduling &amp; BA ERP Europe</h3>
-        <div class="exp-tags"><span class="exp-tag">ERP</span><span class="exp-tag">Business Analysis</span><span class="exp-tag">Europe</span></div>
+        <h3 class="exp-role">Resp. Dev Scheduling &amp; Business Analyste ERP Europe</h3>
+        <p class="exp-desc">Conception et développement du module scheduling intégré à l'ERP. Analyse processus métier industriels (multi-sites, langues, devises). Spécifications fonctionnelles. Formation équipes locales européennes. Support avant-vente.</p>
+        <div class="exp-tags"><span class="exp-tag">ERP</span><span class="exp-tag">Business Analysis</span><span class="exp-tag">Europe</span><span class="exp-tag">Scheduling</span></div>
       </div>
     </div>
 
     <div class="exp-item">
-      <div class="exp-left">
-        <p class="exp-period">1999 → 2001</p>
-        <p class="exp-co">Moul'Anjou Plastique</p>
-      </div>
+      <div class="exp-left"><p class="exp-period">1999 → 2001</p><p class="exp-co">Moul'Anjou Plastique</p></div>
       <div>
         <h3 class="exp-role">Resp. Projet ERP · Injection Plastique</h3>
-        <div class="exp-tags"><span class="exp-tag">ERP</span><span class="exp-tag">Plasturgie</span></div>
+        <p class="exp-desc">Mise en œuvre ERP en production industrielle (injection plastique). Recueil besoins, cahier des charges, déploiement, formation utilisateurs. Intégration GPAO et systèmes supervision machine. Amélioration processus planification et gestion des stocks.</p>
+        <div class="exp-tags"><span class="exp-tag">ERP</span><span class="exp-tag">Plasturgie</span><span class="exp-tag">Industrie</span></div>
       </div>
     </div>
-
   </div>
 </section>
 
-<!-- COMPETENCES -->
 <section id="competences">
   <div class="section-header">
     <p class="section-id">// MODULE_02 :: SKILLS.DAT</p>
     <h2 class="section-title">Compétences</h2>
   </div>
-
   <div class="skills-grid">
     <div class="skill-panel">
       <p class="skill-panel-title">// Techniques</p>
-      <div class="skill-row" data-level="100">
-        <div class="skill-info"><span class="skill-name">Gestion de projet</span><span class="skill-meta">19A · EXPERT</span></div>
-        <div class="skill-bar"><div class="skill-fill"></div></div>
-      </div>
-      <div class="skill-row" data-level="75">
-        <div class="skill-info"><span class="skill-name">Méthodologies Agiles</span><span class="skill-meta">15A · ★★★</span></div>
-        <div class="skill-bar"><div class="skill-fill"></div></div>
-      </div>
-      <div class="skill-row" data-level="100">
-        <div class="skill-info"><span class="skill-name">Scheduling</span><span class="skill-meta">5A · EXPERT</span></div>
-        <div class="skill-bar"><div class="skill-fill"></div></div>
-      </div>
-      <div class="skill-row" data-level="75">
-        <div class="skill-info"><span class="skill-name">UX / UI</span><span class="skill-meta">15A · ★★★</span></div>
-        <div class="skill-bar"><div class="skill-fill"></div></div>
-      </div>
-      <div class="skill-row" data-level="100">
-        <div class="skill-info"><span class="skill-name">CMS E-Commerce</span><span class="skill-meta">6A · EXPERT</span></div>
-        <div class="skill-bar"><div class="skill-fill"></div></div>
-      </div>
-      <div class="skill-row" data-level="50">
-        <div class="skill-info"><span class="skill-name">Dev HTML/CSS/PHP/JS</span><span class="skill-meta">8A · ★★</span></div>
-        <div class="skill-bar"><div class="skill-fill"></div></div>
-      </div>
+      <div class="skill-row" data-level="100"><div class="skill-info"><span class="skill-name">Gestion de projet</span><span class="skill-meta">25A · EXPERT</span></div><div class="skill-bar"><div class="skill-fill"></div></div></div>
+      <div class="skill-row" data-level="75"><div class="skill-info"><span class="skill-name">Méthodologies Agiles</span><span class="skill-meta">22A · ★★★</span></div><div class="skill-bar"><div class="skill-fill"></div></div></div>
+      <div class="skill-row" data-level="75"><div class="skill-info"><span class="skill-name">UX / UI</span><span class="skill-meta">15A · ★★★</span></div><div class="skill-bar"><div class="skill-fill"></div></div></div>
+      <div class="skill-row" data-level="75"><div class="skill-info"><span class="skill-name">Design Thinking</span><span class="skill-meta">15A · ★★★</span></div><div class="skill-bar"><div class="skill-fill"></div></div></div>
+      <div class="skill-row" data-level="100"><div class="skill-info"><span class="skill-name">CMS E-Commerce</span><span class="skill-meta">6A · EXPERT</span></div><div class="skill-bar"><div class="skill-fill"></div></div></div>
+      <div class="skill-row" data-level="100"><div class="skill-info"><span class="skill-name">Scheduling</span><span class="skill-meta">5A · EXPERT</span></div><div class="skill-bar"><div class="skill-fill"></div></div></div>
+      <div class="skill-row" data-level="50"><div class="skill-info"><span class="skill-name">Dev HTML/CSS/PHP/JS</span><span class="skill-meta">8A · ★★</span></div><div class="skill-bar"><div class="skill-fill"></div></div></div>
     </div>
-
     <div class="skill-panel">
       <p class="skill-panel-title">// Technologies IT</p>
-      <div class="skill-row" data-level="75">
-        <div class="skill-info"><span class="skill-name">ERP</span><span class="skill-meta">10A · ★★★</span></div>
-        <div class="skill-bar"><div class="skill-fill"></div></div>
-      </div>
-      <div class="skill-row" data-level="100">
-        <div class="skill-info"><span class="skill-name">E-Commerce</span><span class="skill-meta">4A · EXPERT</span></div>
-        <div class="skill-bar"><div class="skill-fill"></div></div>
-      </div>
-      <div class="skill-row" data-level="100">
-        <div class="skill-info"><span class="skill-name">Marketing Digital</span><span class="skill-meta">6A · EXPERT</span></div>
-        <div class="skill-bar"><div class="skill-fill"></div></div>
-      </div>
-      <div class="skill-row" data-level="50">
-        <div class="skill-info"><span class="skill-name">Business Intelligence</span><span class="skill-meta">2A · ★★</span></div>
-        <div class="skill-bar"><div class="skill-fill"></div></div>
-      </div>
+      <div class="skill-row" data-level="100"><div class="skill-info"><span class="skill-name">E-Commerce</span><span class="skill-meta">6A · EXPERT</span></div><div class="skill-bar"><div class="skill-fill"></div></div></div>
+      <div class="skill-row" data-level="100"><div class="skill-info"><span class="skill-name">Marketing Digital</span><span class="skill-meta">6A · EXPERT</span></div><div class="skill-bar"><div class="skill-fill"></div></div></div>
+      <div class="skill-row" data-level="75"><div class="skill-info"><span class="skill-name">ERP</span><span class="skill-meta">10A · ★★★</span></div><div class="skill-bar"><div class="skill-fill"></div></div></div>
+      <div class="skill-row" data-level="75"><div class="skill-info"><span class="skill-name">CRM (Salesforce / Dynamics)</span><span class="skill-meta">★★★</span></div><div class="skill-bar"><div class="skill-fill"></div></div></div>
+      <div class="skill-row" data-level="50"><div class="skill-info"><span class="skill-name">Business Intelligence</span><span class="skill-meta">Power BI · ★★</span></div><div class="skill-bar"><div class="skill-fill"></div></div></div>
+      <div class="skill-row" data-level="75"><div class="skill-info"><span class="skill-name">Data &amp; Analytics</span><span class="skill-meta">GA4 · Microstrategy</span></div><div class="skill-bar"><div class="skill-fill"></div></div></div>
+      <div class="skill-row" data-level="75"><div class="skill-info"><span class="skill-name">Outils IA</span><span class="skill-meta">Analyse · Génération</span></div><div class="skill-bar"><div class="skill-fill"></div></div></div>
     </div>
-
     <div class="skill-panel">
       <p class="skill-panel-title">// Management</p>
-      <div class="skill-row" data-level="100">
-        <div class="skill-info"><span class="skill-name">Pilotage de projets</span><span class="skill-meta">19A · EXPERT</span></div>
-        <div class="skill-bar"><div class="skill-fill"></div></div>
-      </div>
-      <div class="skill-row" data-level="100">
-        <div class="skill-info"><span class="skill-name">Gestion des risques</span><span class="skill-meta">19A · EXPERT</span></div>
-        <div class="skill-bar"><div class="skill-fill"></div></div>
-      </div>
-      <div class="skill-row" data-level="100">
-        <div class="skill-info"><span class="skill-name">Veille technologique</span><span class="skill-meta">10A · EXPERT</span></div>
-        <div class="skill-bar"><div class="skill-fill"></div></div>
-      </div>
-      <div class="skill-row" data-level="75">
-        <div class="skill-info"><span class="skill-name">Web Marketing</span><span class="skill-meta">7A · ★★★</span></div>
-        <div class="skill-bar"><div class="skill-fill"></div></div>
-      </div>
-      <div class="skill-row" data-level="75">
-        <div class="skill-info"><span class="skill-name">Stratégie commerciale</span><span class="skill-meta">5A · ★★★</span></div>
-        <div class="skill-bar"><div class="skill-fill"></div></div>
-      </div>
+      <div class="skill-row" data-level="100"><div class="skill-info"><span class="skill-name">Pilotage de projets</span><span class="skill-meta">25A · EXPERT</span></div><div class="skill-bar"><div class="skill-fill"></div></div></div>
+      <div class="skill-row" data-level="100"><div class="skill-info"><span class="skill-name">Gestion des risques</span><span class="skill-meta">25A · EXPERT</span></div><div class="skill-bar"><div class="skill-fill"></div></div></div>
+      <div class="skill-row" data-level="100"><div class="skill-info"><span class="skill-name">Veille technologique</span><span class="skill-meta">10A · EXPERT</span></div><div class="skill-bar"><div class="skill-fill"></div></div></div>
+      <div class="skill-row" data-level="75"><div class="skill-info"><span class="skill-name">Web Marketing</span><span class="skill-meta">7A · ★★★</span></div><div class="skill-bar"><div class="skill-fill"></div></div></div>
+      <div class="skill-row" data-level="75"><div class="skill-info"><span class="skill-name">Stratégie commerciale</span><span class="skill-meta">6A · ★★★</span></div><div class="skill-bar"><div class="skill-fill"></div></div></div>
+      <div class="skill-row" data-level="75"><div class="skill-info"><span class="skill-name">Stratégie des marques</span><span class="skill-meta">6A · ★★★</span></div><div class="skill-bar"><div class="skill-fill"></div></div></div>
     </div>
   </div>
 </section>
 
-<!-- SECTEURS -->
 <section id="secteurs">
   <div class="section-header">
     <p class="section-id">// MODULE_03 :: SECTORS.MAP</p>
     <h2 class="section-title">Secteurs</h2>
   </div>
-
   <div class="sectors-grid">
     <div class="sector-cell">User Experience</div>
     <div class="sector-cell">Marketing Digital</div>
@@ -1031,23 +433,25 @@
     <div class="sector-cell">Plasturgie</div>
     <div class="sector-cell">Éditeur ERP</div>
     <div class="sector-cell">Qualité Logicielle</div>
+    <div class="sector-cell">Data &amp; BI</div>
     <div class="sector-cell">Design Thinking</div>
-    <div class="sector-cell">Agile &amp; PMI</div>
+    <div class="sector-cell">Agile &amp; Scrum</div>
+    <div class="sector-cell">PMI</div>
+    <div class="sector-cell">CRM</div>
+    <div class="sector-cell">Product Management</div>
   </div>
 </section>
 
-<!-- FORMATION -->
 <section id="formation">
   <div class="section-header">
     <p class="section-id">// MODULE_04 :: EDUCATION.SYS</p>
     <h2 class="section-title">Formation</h2>
   </div>
-
   <div class="edu-grid">
     <div class="edu-card">
       <p class="edu-year">// 1999</p>
       <h3 class="edu-degree">Diplôme d'Ingénieur</h3>
-      <p class="edu-school">ENISE — Saint-Étienne</p>
+      <p class="edu-school">ENISE — Saint-Étienne<br>Groupe Centrale Lyon<br>Spécialisation Design Industriel<br>Biennale du Design de Saint-Étienne</p>
     </div>
     <div class="edu-card">
       <p class="edu-year">// 1994</p>
@@ -1055,37 +459,38 @@
       <p class="edu-school">Clermont-Ferrand</p>
     </div>
   </div>
-
   <p class="certs-title">// CERTIFICATIONS &amp; OUTILS</p>
   <div class="certs-grid">
     <span class="cert-chip">CMMI</span>
+    <span class="cert-chip">PMI (2005)</span>
     <span class="cert-chip">HP Quality Center</span>
     <span class="cert-chip">HP Functional Testing &amp; BPT</span>
     <span class="cert-chip">MS Project</span>
     <span class="cert-chip">JIRA · Confluence</span>
-    <span class="cert-chip">Prestashop · Magento</span>
+    <span class="cert-chip">Prestashop · Magento · Salesforce</span>
+    <span class="cert-chip">Power BI · Microstrategy</span>
+    <span class="cert-chip">GA4</span>
+    <span class="cert-chip">Scrum · Kanban · XP</span>
+    <span class="cert-chip">Outils IA</span>
   </div>
 </section>
 
-<!-- FOOTER -->
 <footer>
   <div class="footer-name">LIABEUF_STÉPHANE</div>
   <div class="footer-info">
     CGI GROUP // CLERMONT-FERRAND<br>
     UX &amp; DIGITAL MANAGER // DIRECTEUR CONSEIL<br>
-    <span style="color:var(--green)">STATUS: AVAILABLE</span>
+    <span style="color:var(--green)">STATUS: AVAILABLE — CV NOV. 2025</span>
   </div>
 </footer>
 
 <script>
-  // Custom cursor
   const dot = document.getElementById('cursorDot');
   document.addEventListener('mousemove', e => {
     dot.style.left = e.clientX + 'px';
     dot.style.top = e.clientY + 'px';
   });
 
-  // Scroll animations
   const obs = new IntersectionObserver((entries) => {
     entries.forEach(entry => {
       if (entry.isIntersecting) {
@@ -1103,7 +508,6 @@
 
   document.querySelectorAll('section').forEach(s => obs.observe(s));
 
-  // Typing effect for hero id
   const heroId = document.querySelector('.hero-id');
   const txt = heroId.innerHTML;
   heroId.innerHTML = '';
@@ -1112,7 +516,7 @@
     const timer = setInterval(() => {
       heroId.innerHTML = txt.slice(0, i++);
       if (i > txt.length) clearInterval(timer);
-    }, 18);
+    }, 16);
   }, 400);
 </script>
 </body>