Theme Matrix + accents francais : refonte visuelle complete

- CSS : theme Matrix avec pluie binaire, scanlines CRT, glow verts, animations
- HTML : ajout de tous les accents francais (entites HTML)
- Canvas Matrix rain en arriere-plan
- Nouvelles classes : glow-card, data-bg, matrix-quote, terminal-line, tags, status-dot
- Suppression des tirets em et emojis
This commit is contained in:
Kerboul
2026-03-10 02:29:47 -07:00
parent d4ba035a0b
commit ada60e8999
2 changed files with 552 additions and 248 deletions

View File

@@ -1,36 +1,112 @@
/* ============================================ /* ============================================
Theme personnalise : Hacker / Cybersecurite Theme MATRIX : Cybersecurite / Lazarus
============================================ */ ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&family=Inter:wght@400;600;700&display=swap');
:root { :root {
--color-bg: #0a0a0a; --color-bg: #000000;
--color-bg-alt: #111111; --color-bg-alt: #0a0f0a;
--color-bg-card: rgba(0, 20, 0, 0.6);
--color-green: #00ff41; --color-green: #00ff41;
--color-green-dim: #00cc33;
--color-green-glow: rgba(0, 255, 65, 0.4);
--color-green-subtle: rgba(0, 255, 65, 0.08);
--color-red: #ff3333; --color-red: #ff3333;
--color-red-glow: rgba(255, 51, 51, 0.4);
--color-cyan: #00e5ff; --color-cyan: #00e5ff;
--color-cyan-glow: rgba(0, 229, 255, 0.3);
--color-yellow: #ffd600; --color-yellow: #ffd600;
--color-text: #e0e0e0; --color-text: #c0d0c0;
--color-muted: #888888; --color-text-bright: #e0ffe0;
--color-border: #2a2a2a; --color-muted: #4a6a4a;
--color-border: #0a3a0a;
--font-mono: 'Fira Code', 'Cascadia Code', 'Consolas', monospace; --font-mono: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
--font-sans: 'Inter', 'Segoe UI', Arial, sans-serif; --font-sans: 'Inter', 'Segoe UI', Arial, sans-serif;
} }
/* ---- Arriere-plan global ---- */ /* ===================== KEYFRAMES ===================== */
@keyframes matrixGlow {
0%, 100% { text-shadow: 0 0 10px var(--color-green-glow), 0 0 20px var(--color-green-glow); }
50% { text-shadow: 0 0 20px var(--color-green), 0 0 40px var(--color-green-glow), 0 0 60px rgba(0,255,65,0.15); }
}
@keyframes glitchColor {
0% { text-shadow: 2px 0 #ff0000, -2px 0 #00ffff; }
25% { text-shadow: -2px 0 #ff0000, 2px 0 #00ffff; }
50% { text-shadow: 2px 2px #ff0000, -2px -2px #00ffff; }
75% { text-shadow: -1px 2px #ff0000, 1px -2px #00ffff; }
100% { text-shadow: 2px 0 #ff0000, -2px 0 #00ffff; }
}
@keyframes blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
@keyframes scanline {
0% { transform: translateY(-100%); }
100% { transform: translateY(100vh); }
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes pulseGlow {
0%, 100% { box-shadow: 0 0 5px var(--color-green-glow), inset 0 0 5px rgba(0,255,65,0.05); }
50% { box-shadow: 0 0 20px var(--color-green-glow), 0 0 40px rgba(0,255,65,0.1), inset 0 0 10px rgba(0,255,65,0.08); }
}
@keyframes redPulse {
0%, 100% { text-shadow: 0 0 10px var(--color-red-glow); }
50% { text-shadow: 0 0 30px var(--color-red), 0 0 60px var(--color-red-glow); }
}
/* ===================== BASE ===================== */
.reveal { .reveal {
background: var(--color-bg); background: var(--color-bg);
color: var(--color-text); color: var(--color-text);
font-family: var(--font-sans); font-family: var(--font-sans);
} }
.reveal .slides { /* Scanlines CRT */
text-align: left; .reveal::after {
content: '';
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
pointer-events: none;
z-index: 9999;
background: repeating-linear-gradient(
0deg,
transparent, transparent 2px,
rgba(0, 255, 65, 0.018) 2px,
rgba(0, 255, 65, 0.018) 4px
);
} }
/* ---- Titres ---- */ /* Barre de scan lumineuse */
.reveal h1, .reveal::before {
.reveal h2, content: '';
.reveal h3 { position: fixed;
top: 0; left: 0;
width: 100%; height: 6px;
background: linear-gradient(180deg, transparent, rgba(0,255,65,0.25), transparent);
z-index: 9998;
pointer-events: none;
animation: scanline 8s linear infinite;
opacity: 0.4;
}
.reveal .slides { text-align: left; }
/* ===================== TITRES + GLOW ===================== */
.reveal h1, .reveal h2, .reveal h3 {
color: var(--color-green); color: var(--color-green);
font-family: var(--font-mono); font-family: var(--font-mono);
text-transform: none; text-transform: none;
@@ -39,96 +115,116 @@
.reveal h1 { .reveal h1 {
font-size: 2.2em; font-size: 2.2em;
border-bottom: 3px solid var(--color-green); border-bottom: 2px solid var(--color-green);
border-image: linear-gradient(90deg, var(--color-green), transparent) 1;
padding-bottom: 0.3em; padding-bottom: 0.3em;
margin-bottom: 0.6em; margin-bottom: 0.6em;
animation: matrixGlow 3s ease-in-out infinite;
} }
.reveal h2 { .reveal h2 {
font-size: 1.6em; font-size: 1.6em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
text-shadow: 0 0 10px var(--color-green-glow);
} }
.reveal h3 { .reveal h3 {
font-size: 1.2em; font-size: 1.2em;
color: var(--color-cyan); color: var(--color-cyan);
text-shadow: 0 0 8px var(--color-cyan-glow);
} }
/* ---- Texte ---- */ /* ===================== TEXTE ===================== */
.reveal p,
.reveal li { .reveal p, .reveal li {
font-size: 0.85em; font-size: 0.85em;
line-height: 1.7; line-height: 1.7;
color: var(--color-text); color: var(--color-text);
} }
.reveal ul, .reveal ul, .reveal ol { margin-left: 1em; }
.reveal ol { .reveal li { margin-bottom: 0.4em; }
margin-left: 1em;
}
.reveal li { /* Puces style terminal > */
margin-bottom: 0.4em; .reveal ul > li {
list-style: none;
padding-left: 1.2em;
position: relative;
}
.reveal ul > li::before {
content: '>';
position: absolute;
left: 0;
color: var(--color-green);
font-family: var(--font-mono);
font-weight: bold;
text-shadow: 0 0 4px var(--color-green-glow);
} }
.reveal strong { .reveal strong {
color: var(--color-green); color: var(--color-green);
text-shadow: 0 0 6px var(--color-green-glow);
} }
.reveal em { .reveal em {
color: var(--color-cyan); color: var(--color-cyan);
font-style: italic; font-style: italic;
text-shadow: 0 0 4px var(--color-cyan-glow);
} }
/* ---- Liens ---- */ /* ===================== LIENS ===================== */
.reveal a { .reveal a {
color: var(--color-cyan); color: var(--color-cyan);
text-decoration: underline; text-decoration: underline;
text-underline-offset: 3px; text-underline-offset: 3px;
text-shadow: 0 0 4px var(--color-cyan-glow);
} }
.reveal a:hover { .reveal a:hover {
color: var(--color-green); color: var(--color-green);
text-shadow: 0 0 10px var(--color-green-glow);
} }
/* ---- Code inline ---- */ /* ===================== CODE ===================== */
.reveal code { .reveal code {
font-family: var(--font-mono); font-family: var(--font-mono);
background: var(--color-bg-alt); background: var(--color-bg-card);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 4px; border-radius: 4px;
padding: 0.15em 0.4em; padding: 0.15em 0.4em;
font-size: 0.85em; font-size: 0.85em;
color: var(--color-green); color: var(--color-green);
text-shadow: 0 0 4px var(--color-green-glow);
} }
/* ---- Blocs de code ---- */
.reveal pre { .reveal pre {
background: var(--color-bg-alt); background: var(--color-bg-card);
border: 1px solid var(--color-border); border: 1px solid var(--color-green);
border-radius: 6px; border-radius: 6px;
padding: 1em; padding: 1em;
width: 100%; width: 100%; box-sizing: border-box;
box-sizing: border-box; box-shadow: 0 0 15px rgba(0,255,65,0.1), inset 0 0 30px rgba(0,0,0,0.5);
} }
.reveal pre code { .reveal pre code {
background: transparent; background: transparent; border: none;
border: none; padding: 0; font-size: 0.75em; line-height: 1.6;
padding: 0;
font-size: 0.75em;
line-height: 1.6;
} }
/* ---- Slide de titre ---- */ /* ===================== SLIDE TITRE ===================== */
.reveal .title-slide {
text-align: center; .reveal .title-slide { text-align: center; }
}
.reveal .title-slide h1 { .reveal .title-slide h1 {
border-bottom: none; border-bottom: none; border-image: none;
font-size: 2.6em; font-size: 2.6em; margin-bottom: 0.3em;
margin-bottom: 0.3em; animation: matrixGlow 2s ease-in-out infinite;
}
/* Glitch au hover */
.reveal .title-slide h1:hover {
animation: glitchColor 0.3s steps(4) infinite, matrixGlow 2s ease-in-out infinite;
} }
.reveal .title-slide .subtitle { .reveal .title-slide .subtitle {
@@ -136,6 +232,15 @@
font-size: 1.1em; font-size: 1.1em;
font-family: var(--font-mono); font-family: var(--font-mono);
margin-bottom: 1.5em; margin-bottom: 1.5em;
text-shadow: 0 0 10px var(--color-cyan-glow);
}
/* Curseur clignotant */
.reveal .title-slide .subtitle::after {
content: '_';
animation: blink 1s step-end infinite;
color: var(--color-green);
margin-left: 2px;
} }
.reveal .title-slide .authors { .reveal .title-slide .authors {
@@ -151,13 +256,14 @@
font-family: var(--font-mono); font-family: var(--font-mono);
} }
/* ---- Classe utilitaire : alerte rouge ---- */ /* ===================== UTILITAIRES ===================== */
.reveal .alert { .reveal .alert {
color: var(--color-red); color: var(--color-red);
font-weight: bold; font-weight: bold;
animation: redPulse 2s ease-in-out infinite;
} }
/* ---- Classe utilitaire : chiffre mis en avant ---- */
.reveal .big-number { .reveal .big-number {
font-size: 3em; font-size: 3em;
font-family: var(--font-mono); font-family: var(--font-mono);
@@ -165,9 +271,9 @@
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
margin: 0.5em 0; margin: 0.5em 0;
text-shadow: 0 0 20px var(--color-red-glow), 0 0 40px rgba(255,51,51,0.15);
} }
/* ---- Classe utilitaire : citation / source ---- */
.reveal .source { .reveal .source {
font-size: 0.6em; font-size: 0.6em;
color: var(--color-muted); color: var(--color-muted);
@@ -175,41 +281,42 @@
margin-top: 1em; margin-top: 1em;
} }
/* ---- Timeline ---- */ /* ===================== TIMELINE ===================== */
.reveal .timeline { .reveal .timeline {
list-style: none; list-style: none;
margin: 0; margin: 0; padding: 0;
padding: 0;
position: relative; position: relative;
} }
.reveal .timeline::before { .reveal .timeline::before {
content: ''; content: '';
position: absolute; position: absolute; left: 8px; top: 0; bottom: 0;
left: 8px;
top: 0;
bottom: 0;
width: 2px; width: 2px;
background: var(--color-green); background: linear-gradient(180deg, transparent, var(--color-green), var(--color-red));
box-shadow: 0 0 8px var(--color-green-glow);
} }
.reveal .timeline li { .reveal .timeline li {
padding-left: 30px; padding-left: 30px; position: relative;
position: relative; margin-bottom: 0.6em; font-size: 0.8em;
margin-bottom: 0.6em; list-style: none;
font-size: 0.8em;
} }
.reveal .timeline li::before { .reveal .timeline li::before {
content: ''; content: '';
position: absolute; position: absolute; left: 3px; top: 0.45em;
left: 3px; width: 12px; height: 12px; border-radius: 50%;
top: 0.45em;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--color-bg); background: var(--color-bg);
border: 2px solid var(--color-green); border: 2px solid var(--color-green);
box-shadow: 0 0 6px var(--color-green-glow);
}
/* Dernier point = rouge pulsant */
.reveal .timeline li:last-child::before {
border-color: var(--color-red);
box-shadow: 0 0 10px var(--color-red-glow), 0 0 20px rgba(255,51,51,0.2);
background: rgba(255,51,51,0.2);
} }
.reveal .timeline .year { .reveal .timeline .year {
@@ -217,101 +324,123 @@
font-family: var(--font-mono); font-family: var(--font-mono);
font-weight: bold; font-weight: bold;
margin-right: 0.5em; margin-right: 0.5em;
text-shadow: 0 0 4px var(--color-cyan-glow);
} }
/* ---- Schema / Diagramme en blocs ---- */ /* ===================== DIAGRAMMES ===================== */
.reveal .diagram { .reveal .diagram {
display: flex; display: flex; align-items: center;
align-items: center;
justify-content: center; justify-content: center;
gap: 0.5em; gap: 0.5em; margin: 1.5em 0; flex-wrap: wrap;
margin: 1.5em 0;
flex-wrap: wrap;
} }
.reveal .diagram .box { .reveal .diagram .box {
background: var(--color-bg-alt); background: var(--color-bg-card);
border: 2px solid var(--color-green); border: 2px solid var(--color-green);
border-radius: 6px; border-radius: 6px;
padding: 0.6em 1em; padding: 0.6em 1em;
font-family: var(--font-mono); font-family: var(--font-mono); font-size: 0.7em;
font-size: 0.7em;
color: var(--color-green); color: var(--color-green);
text-align: center; text-align: center; min-width: 100px;
min-width: 100px; box-shadow: 0 0 10px var(--color-green-glow), inset 0 0 15px rgba(0,255,65,0.03);
transition: all 0.3s ease;
}
.reveal .diagram .box:hover {
box-shadow: 0 0 25px var(--color-green-glow), 0 0 50px rgba(0,255,65,0.15);
transform: scale(1.05);
} }
.reveal .diagram .box.red { .reveal .diagram .box.red {
border-color: var(--color-red); border-color: var(--color-red); color: var(--color-red);
color: var(--color-red); box-shadow: 0 0 10px var(--color-red-glow);
}
.reveal .diagram .box.red:hover {
box-shadow: 0 0 25px var(--color-red-glow), 0 0 50px rgba(255,51,51,0.15);
} }
.reveal .diagram .box.cyan { .reveal .diagram .box.cyan {
border-color: var(--color-cyan); border-color: var(--color-cyan); color: var(--color-cyan);
color: var(--color-cyan); box-shadow: 0 0 10px var(--color-cyan-glow);
} }
.reveal .diagram .arrow { .reveal .diagram .arrow {
color: var(--color-muted); color: var(--color-green-dim);
font-size: 1.5em; font-size: 1.5em;
font-family: var(--font-mono); font-family: var(--font-mono);
text-shadow: 0 0 8px var(--color-green-glow);
animation: matrixGlow 2s ease-in-out infinite;
} }
/* ---- Grille 2 colonnes ---- */ /* ===================== LAYOUT ===================== */
.reveal .two-cols { .reveal .two-cols {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 2em; gap: 2em; align-items: start;
align-items: start;
} }
/* ---- Slide sommaire ---- */ /* ===================== SOMMAIRE ===================== */
.reveal .toc ol { .reveal .toc ol {
list-style: decimal; list-style: none;
counter-reset: toc-counter;
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 0.85em; font-size: 0.85em;
padding-left: 0;
} }
.reveal .toc ol li { .reveal .toc ol li {
counter-increment: toc-counter;
margin-bottom: 0.5em; margin-bottom: 0.5em;
color: var(--color-text); color: var(--color-text);
padding-left: 2.5em;
position: relative;
} }
/* ---- Barre de progression ---- */ .reveal .toc ol li::before {
.reveal .progress { content: '[' counter(toc-counter, decimal-leading-zero) ']';
color: var(--color-green); color: var(--color-green);
position: absolute; left: 0;
text-shadow: 0 0 4px var(--color-green-glow);
}
/* ===================== PROGRESS / SLIDE NUMBER ===================== */
.reveal .progress { color: var(--color-green); height: 3px; }
.reveal .progress span {
background: var(--color-green);
box-shadow: 0 0 10px var(--color-green), 0 0 20px var(--color-green-glow);
} }
/* ---- Numeros de slide ---- */
.reveal .slide-number { .reveal .slide-number {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 0.6em; font-size: 0.6em;
color: var(--color-muted); color: var(--color-green-dim);
background: transparent;
text-shadow: 0 0 4px var(--color-green-glow);
} }
/* ---- Fragment animation ---- */ /* ===================== FRAGMENTS ===================== */
.reveal .fragment.highlight-green.visible {
color: var(--color-green);
}
.reveal .fragment.highlight-red.visible { .reveal .fragment { transition: all 0.4s ease; }
color: var(--color-red); .reveal .fragment.visible { animation: fadeInUp 0.5s ease forwards; }
} .reveal .fragment.highlight-green.visible { color: var(--color-green); }
.reveal .fragment.highlight-red.visible { color: var(--color-red); }
/* ---- Table ---- */ /* ===================== TABLE ===================== */
.reveal table {
border-collapse: collapse; .reveal table { border-collapse: collapse; width: 100%; font-size: 0.75em; }
width: 100%;
font-size: 0.75em;
}
.reveal table th { .reveal table th {
background: var(--color-bg-alt); background: var(--color-bg-card);
color: var(--color-green); color: var(--color-green);
font-family: var(--font-mono); font-family: var(--font-mono);
padding: 0.5em 0.8em; padding: 0.5em 0.8em;
border-bottom: 2px solid var(--color-green); border-bottom: 2px solid var(--color-green);
text-align: left; text-align: left;
text-shadow: 0 0 4px var(--color-green-glow);
} }
.reveal table td { .reveal table td {
@@ -321,15 +450,125 @@
} }
.reveal table tr:hover td { .reveal table tr:hover td {
background: var(--color-bg-alt); background: var(--color-bg-card);
color: var(--color-text-bright);
} }
/* ---- Slide finale ---- */ /* ===================== SLIDE FINALE ===================== */
.reveal .end-slide {
text-align: center;
}
.reveal .end-slide { text-align: center; }
.reveal .end-slide h1 { .reveal .end-slide h1 {
border-bottom: none; border-bottom: none; border-image: none;
font-size: 3em; font-size: 3em;
animation: matrixGlow 1.5s ease-in-out infinite;
} }
/* ===================== GLOW CARD ===================== */
.reveal .glow-card {
background: var(--color-bg-card);
border: 1px solid var(--color-green);
border-radius: 8px;
padding: 1.2em 1.5em; margin: 1em 0;
box-shadow: 0 0 15px var(--color-green-glow), inset 0 0 30px rgba(0,0,0,0.5);
animation: pulseGlow 4s ease-in-out infinite;
}
.reveal .glow-card.red {
border-color: var(--color-red);
box-shadow: 0 0 15px var(--color-red-glow), inset 0 0 30px rgba(0,0,0,0.5);
}
.reveal .glow-card h3 { margin-top: 0; }
/* ===================== DATA BACKGROUND ===================== */
.reveal .data-bg { position: relative; overflow: hidden; }
.reveal .data-bg::before {
content: '01001100 01000001 01011010 01000001 01010010 01010101 01010011 00100000 01000010 01011001 01000010 01001001 01010100 00100000 00110001 00101110 00110101 01000010 ';
position: absolute; top: 0; left: 0;
width: 100%; height: 100%;
font-family: var(--font-mono); font-size: 0.5em;
color: rgba(0,255,65,0.04);
word-break: break-all; line-height: 1.8;
z-index: 0; pointer-events: none; overflow: hidden;
}
.reveal .data-bg > * { position: relative; z-index: 1; }
/* ===================== TERMINAL PROMPT ===================== */
.reveal .terminal-line {
font-family: var(--font-mono);
font-size: 0.8em;
color: var(--color-green);
margin: 0.3em 0;
}
.reveal .terminal-line::before {
content: 'root@lazarus:~$ ';
color: var(--color-muted);
}
.reveal .terminal-line::after {
content: '_';
animation: blink 1s step-end infinite;
}
/* ===================== TAGS ===================== */
.reveal .tag {
display: inline-block;
font-family: var(--font-mono); font-size: 0.65em;
padding: 0.2em 0.6em; border-radius: 3px;
background: var(--color-bg-card);
border: 1px solid var(--color-green);
color: var(--color-green); margin: 0.15em;
text-shadow: 0 0 4px var(--color-green-glow);
}
.reveal .tag.red { border-color: var(--color-red); color: var(--color-red); }
.reveal .tag.cyan { border-color: var(--color-cyan); color: var(--color-cyan); }
/* ===================== SEPARATEUR ===================== */
.reveal .matrix-hr {
border: none; height: 1px;
background: linear-gradient(90deg, transparent, var(--color-green), transparent);
box-shadow: 0 0 10px var(--color-green-glow);
margin: 1.5em 0;
}
/* ===================== CITATION ===================== */
.reveal .matrix-quote {
border-left: 3px solid var(--color-green);
padding: 0.8em 1.2em; margin: 1em 0;
background: var(--color-bg-card);
font-style: italic; color: var(--color-text-bright);
box-shadow: inset 3px 0 15px rgba(0,255,65,0.05);
}
/* ===================== STATUS DOT ===================== */
.reveal .status-dot {
display: inline-block;
width: 8px; height: 8px; border-radius: 50%;
background: var(--color-green);
box-shadow: 0 0 6px var(--color-green);
animation: blink 1.5s step-end infinite;
margin-right: 6px; vertical-align: middle;
}
.reveal .status-dot.red {
background: var(--color-red);
box-shadow: 0 0 6px var(--color-red);
}
/* ===================== SECTIONS FADE ===================== */
.reveal section { animation: fadeInUp 0.6s ease forwards; }
/* ===================== RESPONSIVE ===================== */
@media (max-width: 800px) {
.reveal .two-cols { grid-template-columns: 1fr; gap: 1em; }
.reveal h1 { font-size: 1.6em; }
.reveal .big-number { font-size: 2em; }
.reveal .diagram { flex-direction: column; }
}

View File

@@ -1,4 +1,4 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
@@ -12,24 +12,34 @@
<!-- Highlight.js pour le code --> <!-- Highlight.js pour le code -->
<link rel="stylesheet" href="node_modules/reveal.js/plugin/highlight/monokai.css"> <link rel="stylesheet" href="node_modules/reveal.js/plugin/highlight/monokai.css">
<!-- Theme personnalise --> <!-- Th&egrave;me personnalis&eacute; -->
<link rel="stylesheet" href="css/custom.css"> <link rel="stylesheet" href="css/custom.css">
<!-- Google Fonts --> <!-- Canvas Matrix Rain -->
<link rel="preconnect" href="https://fonts.googleapis.com"> <style>
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&family=Inter:wght@400;600;700&display=swap" rel="stylesheet"> #matrix-rain {
position: fixed;
top: 0; left: 0;
width: 100vw; height: 100vh;
z-index: 0;
pointer-events: none;
opacity: 0.12;
}
.reveal { position: relative; z-index: 1; }
</style>
</head> </head>
<body> <body>
<canvas id="matrix-rain"></canvas>
<div class="reveal"> <div class="reveal">
<div class="slides"> <div class="slides">
<!-- ============================================ --> <!-- ============================================ -->
<!-- SLIDE 1 : Page de titre --> <!-- SLIDE 1 : Page de titre -->
<!-- ============================================ --> <!-- ============================================ -->
<section class="title-slide"> <section class="title-slide data-bg">
<h1>Le Groupe Lazarus<br>&amp; le hack de Bybit</h1> <h1>Le Groupe Lazarus<br>&amp; le hack de Bybit</h1>
<div class="subtitle">Fevrier 2025 / 1,5 milliard de dollars en Ethereum</div> <div class="subtitle">F&eacute;vrier 2025 / 1,5 milliard de dollars en Ethereum</div>
<div class="authors">Presentation par [Prenom 1], [Prenom 2] et [Prenom 3]</div> <div class="authors">Pr&eacute;sentation par [Pr&eacute;nom 1], [Pr&eacute;nom 2] et [Pr&eacute;nom 3]</div>
<div class="date">2025 / 2026</div> <div class="date">2025 / 2026</div>
</section> </section>
@@ -45,10 +55,10 @@
<li>Le virage vers les cryptomonnaies</li> <li>Le virage vers les cryptomonnaies</li>
<li>Bybit : la cible</li> <li>Bybit : la cible</li>
<li>Anatomie technique de l'attaque</li> <li>Anatomie technique de l'attaque</li>
<li>Impact sur le marche</li> <li>Impact sur le march&eacute;</li>
<li>Reponse de Bybit et attribution</li> <li>R&eacute;ponse de Bybit et attribution</li>
<li>Se proteger contre ce type d'attaque</li> <li>Se prot&eacute;ger contre ce type d'attaque</li>
<li>Enjeux geopolitiques</li> <li>Enjeux g&eacute;opolitiques</li>
<li>Conclusion</li> <li>Conclusion</li>
</ol> </ol>
</div> </div>
@@ -57,30 +67,30 @@
<!-- ============================================ --> <!-- ============================================ -->
<!-- SLIDE 3 : Qui est le Groupe Lazarus ? --> <!-- SLIDE 3 : Qui est le Groupe Lazarus ? -->
<!-- ============================================ --> <!-- ============================================ -->
<section> <section class="data-bg">
<h1>Qui est le Groupe Lazarus ?</h1> <h1>Qui est le Groupe Lazarus ?</h1>
<div class="two-cols"> <div class="two-cols">
<div> <div>
<p>Groupe de hackers etatique lie a la <strong>Coree du Nord</strong>, actif depuis <strong>2009</strong>.</p> <p>Groupe de hackers &eacute;tatique li&eacute; &agrave; la <strong>Cor&eacute;e du Nord</strong>, actif depuis <strong>2009</strong>.</p>
<p>Classe comme <em>Advanced Persistent Threat</em> (APT) par les agences de renseignement occidentales.</p> <p>Class&eacute; comme <em>Advanced Persistent Threat</em> (APT) par les agences de renseignement occidentales.</p>
<p>Rattache au <strong>Reconnaissance General Bureau</strong> (renseignement militaire nord-coreen) et au <strong>Bureau 121</strong>, l'unite de cyberguerre.</p> <p>Rattach&eacute; au <strong>Reconnaissance General Bureau</strong> (renseignement militaire nord-cor&eacute;en) et au <strong>Bureau 121</strong>, l'unit&eacute; de cyberguerre.</p>
<p>Compose de deux sous-groupes principaux :</p> <p>Compos&eacute; de deux sous-groupes principaux :</p>
<ul> <ul>
<li><strong>BlueNorOff</strong> (APT38) : operations financieres</li> <li><strong>BlueNorOff</strong> (APT38) : op&eacute;rations financi&egrave;res</li>
<li><strong>AndAriel</strong> : espionnage cible sur la Coree du Sud</li> <li><strong>AndAriel</strong> : espionnage cibl&eacute; sur la Cor&eacute;e du Sud</li>
</ul> </ul>
</div> </div>
<div> <div>
<h3>Alias connus</h3> <h3>Alias connus</h3>
<ul> <p>
<li>Hidden Cobra (Dept. Homeland Security)</li> <span class="tag">Hidden Cobra</span>
<li>ZINC / Diamond Sleet (Microsoft)</li> <span class="tag cyan">ZINC / Diamond Sleet</span>
<li>APT38 (Mandiant)</li> <span class="tag">APT38</span>
<li>Stardust Chollima (CrowdStrike)</li> <span class="tag cyan">Stardust Chollima</span>
<li>Guardians of Peace</li> <span class="tag">Guardians of Peace</span>
<li>NICKEL ACADEMY (Secureworks)</li> <span class="tag cyan">NICKEL ACADEMY</span>
</ul> </p>
<p class="source">Sources : MITRE ATT&CK G0032, US Treasury OFAC, Kaspersky</p> <p class="source">Sources : MITRE ATT&amp;CK G0032, US Treasury OFAC, Kaspersky</p>
</div> </div>
</div> </div>
</section> </section>
@@ -91,10 +101,10 @@
<section> <section>
<h1>Historique des attaques majeures</h1> <h1>Historique des attaques majeures</h1>
<ul class="timeline"> <ul class="timeline">
<li><span class="year">2009</span> Operation Troy : attaques DDoS contre la Coree du Sud</li> <li><span class="year">2009</span> Op&eacute;ration Troy : attaques DDoS contre la Cor&eacute;e du Sud</li>
<li><span class="year">2013</span> DarkSeoul : wiper contre banques et medias sud-coreens</li> <li><span class="year">2013</span> DarkSeoul : wiper contre banques et m&eacute;dias sud-cor&eacute;ens</li>
<li><span class="year">2014</span> Hack de Sony Pictures : vol de donnees, destruction de systemes</li> <li><span class="year">2014</span> Hack de Sony Pictures : vol de donn&eacute;es, destruction de syst&egrave;mes</li>
<li><span class="year">2016</span> Braquage de la Bangladesh Bank via SWIFT : <strong>81 M$</strong> voles</li> <li><span class="year">2016</span> Braquage de la Bangladesh Bank via SWIFT : <strong>81 M$</strong> vol&eacute;s</li>
<li><span class="year">2017</span> WannaCry : ransomware mondial, 200 000 machines dans 150 pays</li> <li><span class="year">2017</span> WannaCry : ransomware mondial, 200 000 machines dans 150 pays</li>
<li><span class="year">2022</span> Ronin Network (Axie Infinity) : <strong>620 M$</strong> en crypto</li> <li><span class="year">2022</span> Ronin Network (Axie Infinity) : <strong>620 M$</strong> en crypto</li>
<li><span class="year">2022</span> Horizon Bridge (Harmony) : <strong>100 M$</strong></li> <li><span class="year">2022</span> Horizon Bridge (Harmony) : <strong>100 M$</strong></li>
@@ -116,16 +126,16 @@
<ul> <ul>
<li>Les sanctions internationales (ONU, USA, UE) bloquent les circuits financiers classiques</li> <li>Les sanctions internationales (ONU, USA, UE) bloquent les circuits financiers classiques</li>
<li>La blockchain offre un pseudo-anonymat exploitable avec des mixers et des bridges cross-chain</li> <li>La blockchain offre un pseudo-anonymat exploitable avec des mixers et des bridges cross-chain</li>
<li>Les exchanges centralisees concentrent des milliards dans quelques wallets</li> <li>Les exchanges centralis&eacute;es concentrent des milliards dans quelques wallets</li>
<li>Les smart contracts tiers representent une surface d'attaque sous-estimee</li> <li>Les smart contracts tiers repr&eacute;sentent une surface d'attaque sous-estim&eacute;e</li>
</ul> </ul>
</div> </div>
<div> <div>
<h3>Estimation des vols</h3> <h3>Estimation des vols</h3>
<div class="big-number">&gt; 3 Md$</div> <div class="big-number">&gt; 3 Md$</div>
<p style="text-align:center;">voles en cryptomonnaies depuis 2017 par des groupes lies a la Coree du Nord.</p> <p style="text-align:center;">vol&eacute;s en cryptomonnaies depuis 2017 par des groupes li&eacute;s &agrave; la Cor&eacute;e du Nord.</p>
<p>Selon les estimations, les revenus issus du cybercrime representent environ <strong>50% des rentrees en devises etrangeres</strong> de la RPDC.</p> <p>Selon les estimations, les revenus issus du cybercrime repr&eacute;sentent environ <strong>50% des rentr&eacute;es en devises &eacute;trang&egrave;res</strong> de la RPDC.</p>
<p>Ces fonds financent directement les programmes nucleaire et balistique.</p> <p>Ces fonds financent directement les programmes nucl&eacute;aire et balistique.</p>
<p class="source">Sources : Chainalysis 2024 Crypto Crime Report, Nations Unies</p> <p class="source">Sources : Chainalysis 2024 Crypto Crime Report, Nations Unies</p>
</div> </div>
</div> </div>
@@ -138,23 +148,25 @@
<h1>Bybit : la cible</h1> <h1>Bybit : la cible</h1>
<div class="two-cols"> <div class="two-cols">
<div> <div>
<ul> <div class="glow-card">
<li>Fondee en 2018, basee a <strong>Dubai</strong></li> <ul>
<li>2e exchange mondial par volume de trading au moment de l'attaque</li> <li>Fond&eacute;e en 2018, bas&eacute;e &agrave; <strong>Dubai</strong></li>
<li>Environ <strong>16 milliards de dollars</strong> d'actifs sous gestion</li> <li><span class="status-dot"></span>2e exchange mondial par volume de trading au moment de l'attaque</li>
<li>Des millions d'utilisateurs dans le monde</li> <li>Environ <strong>16 milliards de dollars</strong> d'actifs sous gestion</li>
</ul> <li>Des millions d'utilisateurs dans le monde</li>
<p>L'attaque a cible le <strong>cold wallet Ethereum</strong> de Bybit, le coffre-fort hors ligne cense etre la couche de securite ultime.</p> </ul>
</div>
<div class="matrix-quote">L'attaque a cibl&eacute; le <strong>cold wallet Ethereum</strong> de Bybit, le coffre-fort hors ligne cens&eacute; &ecirc;tre la couche de s&eacute;curit&eacute; ultime.</div>
</div> </div>
<div> <div>
<h3>Cold wallet vs Hot wallet</h3> <h3>Cold wallet vs Hot wallet</h3>
<div class="diagram"> <div class="diagram">
<div class="box cyan">Hot Wallet<br><small>en ligne, rapide</small></div> <div class="box cyan">Hot Wallet<br><small>en ligne, rapide</small></div>
<div class="arrow">&larr;&rarr;</div> <div class="arrow">&larr;&rarr;</div>
<div class="box">Cold Wallet<br><small>hors ligne, securise</small></div> <div class="box">Cold Wallet<br><small>hors ligne, s&eacute;curis&eacute;</small></div>
</div> </div>
<p>Un cold wallet necessite plusieurs signatures (multisig) pour autoriser un transfert. En theorie, meme si un signataire est compromis, les fonds restent proteges.</p> <p>Un cold wallet n&eacute;cessite plusieurs signatures (multisig) pour autoriser un transfert. En th&eacute;orie, m&ecirc;me si un signataire est compromis, les fonds restent prot&eacute;g&eacute;s.</p>
<p><strong>En theorie.</strong></p> <p><strong>En th&eacute;orie.</strong></p>
</div> </div>
</div> </div>
</section> </section>
@@ -162,12 +174,11 @@
<!-- ============================================ --> <!-- ============================================ -->
<!-- SLIDE 7 : Anatomie technique 1/3 --> <!-- SLIDE 7 : Anatomie technique 1/3 -->
<!-- ============================================ --> <!-- ============================================ -->
<section> <section class="data-bg">
<h1>Anatomie de l'attaque (1/3)</h1> <h1>Anatomie de l'attaque (1/3)</h1>
<h2>Vecteur initial : Safe{Wallet}</h2> <h2>Vecteur initial : Safe{Wallet}</h2>
<p><strong>Safe{Wallet}</strong> (anciennement Gnosis Safe) est un service tiers utilise par Bybit pour gerer la signature multiple (multisig) de ses cold wallets.</p> <p><strong>Safe{Wallet}</strong> (anciennement Gnosis Safe) est un service tiers utilis&eacute; par Bybit pour g&eacute;rer la signature multiple (multisig) de ses cold wallets.</p>
<p>Les attaquants ont compromis l'infrastructure de Safe{Wallet} elle-meme, <p>Les attaquants ont compromis l'infrastructure de Safe{Wallet} elle-m&ecirc;me, pas directement les syst&egrave;mes de Bybit.</p>
pas directement les systemes de Bybit.</p>
<div class="diagram"> <div class="diagram">
<div class="box red">Lazarus</div> <div class="box red">Lazarus</div>
<div class="arrow">&rarr;</div> <div class="arrow">&rarr;</div>
@@ -177,8 +188,8 @@
<div class="arrow">&rarr;</div> <div class="arrow">&rarr;</div>
<div class="box cyan">Signataires<br>Bybit</div> <div class="box cyan">Signataires<br>Bybit</div>
</div> </div>
<p>Les signataires de Bybit ont vu une interface apparemment legitime. Ils ont approuve ce qui semblait etre une transaction de routine, mais le contenu reel de la transaction avait ete modifie cote serveur.</p> <p>Les signataires de Bybit ont vu une interface apparemment l&eacute;gitime. Ils ont approuv&eacute; ce qui semblait &ecirc;tre une transaction de routine, mais le contenu r&eacute;el de la transaction avait &eacute;t&eacute; modifi&eacute; c&ocirc;t&eacute; serveur.</p>
<p class="source">Source : CoinTelegraph, Fevrier 2025</p> <p class="source">Source : CoinTelegraph, F&eacute;vrier 2025</p>
</section> </section>
<!-- ============================================ --> <!-- ============================================ -->
@@ -187,13 +198,15 @@
<section> <section>
<h1>Anatomie de l'attaque (2/3)</h1> <h1>Anatomie de l'attaque (2/3)</h1>
<h2>Exploitation du smart contract</h2> <h2>Exploitation du smart contract</h2>
<p>La fausse transaction approuvee par les signataires a modifie la logique du smart contract du cold wallet :</p> <div class="glow-card">
<ol> <p>La fausse transaction approuv&eacute;e par les signataires a modifi&eacute; la logique du smart contract du cold wallet :</p>
<li>Les signataires approuvent une transaction qui semble normale</li> <ol>
<li class="fragment">La transaction reelle modifie le <em>implementation contract</em> du proxy wallet</li> <li>Les signataires approuvent une transaction qui semble normale</li>
<li class="fragment">La nouvelle logique donne le controle total a l'attaquant</li> <li class="fragment">La transaction r&eacute;elle modifie le <em>implementation contract</em> du proxy wallet</li>
<li class="fragment">L'attaquant transfere ~400 000 ETH en une seule operation</li> <li class="fragment">La nouvelle logique donne le contr&ocirc;le total &agrave; l'attaquant</li>
</ol> <li class="fragment">L'attaquant transf&egrave;re ~400 000 ETH en une seule op&eacute;ration</li>
</ol>
</div>
<div class="fragment"> <div class="fragment">
<div class="big-number">~400 000 ETH</div> <div class="big-number">~400 000 ETH</div>
<p style="text-align:center;">soit environ <strong>1,5 milliard de dollars</strong> au cours du jour</p> <p style="text-align:center;">soit environ <strong>1,5 milliard de dollars</strong> au cours du jour</p>
@@ -207,9 +220,9 @@
<section> <section>
<h1>Anatomie de l'attaque (3/3)</h1> <h1>Anatomie de l'attaque (3/3)</h1>
<h2>Phase de blanchiment</h2> <h2>Phase de blanchiment</h2>
<p>Une fois les fonds transferes, les attaquants ont lance un processus de blanchiment sophistique et rapide :</p> <p>Une fois les fonds transf&eacute;r&eacute;s, les attaquants ont lanc&eacute; un processus de blanchiment sophistiqu&eacute; et rapide :</p>
<div class="diagram"> <div class="diagram">
<div class="box red">400K ETH<br>voles</div> <div class="box red">400K ETH<br>vol&eacute;s</div>
<div class="arrow">&rarr;</div> <div class="arrow">&rarr;</div>
<div class="box">Dispersion<br><small>multiples wallets</small></div> <div class="box">Dispersion<br><small>multiples wallets</small></div>
<div class="arrow">&rarr;</div> <div class="arrow">&rarr;</div>
@@ -220,102 +233,110 @@
<div class="box cyan">Conversion<br>en BTC</div> <div class="box cyan">Conversion<br>en BTC</div>
</div> </div>
<ul> <ul>
<li>Les fonds sont disperses vers des centaines de wallets intermediaires</li> <li>Les fonds sont dispers&eacute;s vers des centaines de wallets interm&eacute;diaires</li>
<li>Utilisation de <strong>mixers</strong> (protocoles de melange) pour brouiller l'origine</li> <li>Utilisation de <strong>mixers</strong> (protocoles de m&eacute;lange) pour brouiller l'origine</li>
<li>Passage par des <strong>bridges cross-chain</strong> (Ethereum vers d'autres blockchains)</li> <li>Passage par des <strong>bridges cross-chain</strong> (Ethereum vers d'autres blockchains)</li>
<li>Conversion progressive en Bitcoin puis potentiellement en monnaie fiat via des exchanges non-regulees</li> <li>Conversion progressive en Bitcoin puis potentiellement en monnaie fiat via des exchanges non r&eacute;gul&eacute;es</li>
<li>Utilisation de DEX (exchanges decentralisees) pour eviter le KYC</li> <li>Utilisation de DEX (exchanges d&eacute;centralis&eacute;es) pour &eacute;viter le KYC</li>
</ul> </ul>
</section> </section>
<!-- ============================================ --> <!-- ============================================ -->
<!-- SLIDE 10 : Impact sur le marche --> <!-- SLIDE 10 : Impact sur le march&eacute; -->
<!-- ============================================ --> <!-- ============================================ -->
<section> <section>
<h1>Impact sur le marche</h1> <h1>Impact sur le march&eacute;</h1>
<div class="two-cols"> <div class="two-cols">
<div> <div>
<h3>Chute des cours</h3> <h3>Chute des cours</h3>
<div class="big-number" style="font-size:2em;">ETH : -20%</div> <div class="glow-card red">
<p>Ethereum a perdu plus de 20% de sa valeur dans les heures suivant l'annonce du hack.</p> <div class="big-number" style="font-size:2em;">ETH : -20%</div>
<div class="big-number" style="font-size:2em;">BTC &lt; 90K$</div> <p>Ethereum a perdu plus de 20% de sa valeur dans les heures suivant l'annonce du hack.</p>
<p>Le Bitcoin est passe sous la barre symbolique des 90 000 dollars.</p> </div>
<div class="glow-card red">
<div class="big-number" style="font-size:2em;">BTC &lt; 90K$</div>
<p>Le Bitcoin est pass&eacute; sous la barre symbolique des 90 000 dollars.</p>
</div>
</div> </div>
<div> <div>
<h3>Effets en chaine</h3> <h3>Effets en cha&icirc;ne</h3>
<ul> <ul>
<li>Ruee vers les retraits sur Bybit et d'autres exchanges</li> <li>Ru&eacute;e vers les retraits sur Bybit et d'autres exchanges</li>
<li>Plusieurs plateformes ont temporairement <strong>suspendu les retraits</strong></li> <li>Plusieurs plateformes ont temporairement <strong>suspendu les retraits</strong></li>
<li>Panique generalisee sur les marches crypto</li> <li>Panique g&eacute;n&eacute;ralis&eacute;e sur les march&eacute;s crypto</li>
<li>Les regulateurs de plusieurs pays ont ouvert des enquetes sur la securite des exchanges</li> <li>Les r&eacute;gulateurs de plusieurs pays ont ouvert des enqu&ecirc;tes sur la s&eacute;curit&eacute; des exchanges</li>
<li>Remise en question de la fiabilite des solutions multisig tierces</li> <li>Remise en question de la fiabilit&eacute; des solutions multisig tierces</li>
</ul> </ul>
</div> </div>
</div> </div>
<p class="source">Sources : CNA, CoinTelegraph, Fevrier 2025</p> <p class="source">Sources : CNA, CoinTelegraph, F&eacute;vrier 2025</p>
</section> </section>
<!-- ============================================ --> <!-- ============================================ -->
<!-- SLIDE 11 : Reponse de Bybit --> <!-- SLIDE 11 : R&eacute;ponse de Bybit -->
<!-- ============================================ --> <!-- ============================================ -->
<section> <section>
<h1>Reponse de Bybit</h1> <h1>R&eacute;ponse de Bybit</h1>
<ul> <div class="glow-card">
<li><strong>Detection rapide</strong> : l'incident a ete identifie en quelques heures</li> <ul>
<li><strong>Communication de crise</strong> : Bybit a publie des communiques transparents des le jour meme</li> <li><span class="status-dot"></span><strong>D&eacute;tection rapide</strong> : l'incident a &eacute;t&eacute; identifi&eacute; en quelques heures</li>
<li><strong>Bounty program</strong> : une prime a ete offerte pour aider a tracer et recuperer les fonds</li> <li><strong>Communication de crise</strong> : Bybit a publi&eacute; des communiqu&eacute;s transparents d&egrave;s le jour m&ecirc;me</li>
<li class="fragment"><strong>ZachXBT</strong>, analyste blockchain independant, a identifie le Groupe Lazarus comme responsable en quelques heures, via des patterns de transactions reconnaissables</li> <li><strong>Bounty program</strong> : une prime a &eacute;t&eacute; offerte pour aider &agrave; tracer et r&eacute;cup&eacute;rer les fonds</li>
<li class="fragment"><strong>Arkham Intelligence</strong> a confirme l'attribution en tracant les wallets vers des adresses liees a des operations precedentes de Lazarus</li> <li class="fragment"><strong>ZachXBT</strong>, analyste blockchain ind&eacute;pendant, a identifi&eacute; le Groupe Lazarus comme responsable en quelques heures, via des patterns de transactions reconnaissables</li>
<li class="fragment">Le <strong>FBI</strong> a ensuite officiellement confirme l'implication de la Coree du Nord</li> <li class="fragment"><strong>Arkham Intelligence</strong> a confirm&eacute; l'attribution en tra&ccedil;ant les wallets vers des adresses li&eacute;es &agrave; des op&eacute;rations pr&eacute;c&eacute;dentes de Lazarus</li>
</ul> <li class="fragment">Le <strong>FBI</strong> a ensuite officiellement confirm&eacute; l'implication de la Cor&eacute;e du Nord</li>
</ul>
</div>
<div class="fragment"> <div class="fragment">
<p>Bybit a declare etre reste <strong>solvable</strong> tout au long de la crise et a annonce avoir recupere une partie des fonds voles.</p> <div class="matrix-quote">Bybit a d&eacute;clar&eacute; &ecirc;tre rest&eacute; <strong>solvable</strong> tout au long de la crise et a annonc&eacute; avoir r&eacute;cup&eacute;r&eacute; une partie des fonds vol&eacute;s.</div>
</div> </div>
</section> </section>
<!-- ============================================ --> <!-- ============================================ -->
<!-- SLIDE 12 : Attribution a Lazarus --> <!-- SLIDE 12 : Attribution &agrave; Lazarus -->
<!-- ============================================ --> <!-- ============================================ -->
<section> <section>
<h1>Attribution a Lazarus</h1> <h1>Attribution &agrave; Lazarus</h1>
<h2>Comment sait-on que c'est eux ?</h2> <h2>Comment sait-on que c'est eux ?</h2>
<div class="two-cols"> <div class="two-cols">
<div> <div>
<h3>Indices techniques</h3> <h3>Indices techniques</h3>
<ul> <ul>
<li>Reutilisation de wallets lies a des hacks precedents (Axie Infinity, Horizon Bridge)</li> <li>R&eacute;utilisation de wallets li&eacute;s &agrave; des hacks pr&eacute;c&eacute;dents (Axie Infinity, Horizon Bridge)</li>
<li>Patterns de blanchiment identiques : meme sequence mixer/bridge/DEX</li> <li>Patterns de blanchiment identiques : m&ecirc;me s&eacute;quence mixer/bridge/DEX</li>
<li>Infrastructure de commande et controle (C2) recoupee avec des operations anterieures</li> <li>Infrastructure de commande et contr&ocirc;le (C2) recoup&eacute;e avec des op&eacute;rations ant&eacute;rieures</li>
<li>Timing et methodes coherents avec le modus operandi de BlueNorOff</li> <li>Timing et m&eacute;thodes coh&eacute;rents avec le modus operandi de BlueNorOff</li>
</ul> </ul>
</div> </div>
<div> <div>
<h3>Confirmations officielles</h3> <h3>Confirmations officielles</h3>
<ul> <div class="matrix-quote">
<li><strong>ZachXBT</strong> : attribution publique en moins de 24h</li> <ul>
<li><strong>Arkham Intelligence</strong> : analyse on-chain confirmant les liens</li> <li><strong>ZachXBT</strong> : attribution publique en moins de 24h</li>
<li><strong>FBI</strong> : communique officiel confirmant l'implication de la RPDC</li> <li><strong>Arkham Intelligence</strong> : analyse on-chain confirmant les liens</li>
<li><strong>Chainalysis</strong> et <strong>Elliptic</strong> : rapports detailles de tracage des fonds</li> <li><strong>FBI</strong> : communiqu&eacute; officiel confirmant l'implication de la RPDC</li>
</ul> <li><strong>Chainalysis</strong> et <strong>Elliptic</strong> : rapports d&eacute;taill&eacute;s de tra&ccedil;age des fonds</li>
<p>L'attribution en cybersecurite est toujours delicate, mais le faisceau de preuves ici est particulierement solide.</p> </ul>
</div>
<p>L'attribution en cybers&eacute;curit&eacute; est toujours d&eacute;licate, mais le faisceau de preuves ici est particuli&egrave;rement solide.</p>
</div> </div>
</div> </div>
</section> </section>
<!-- ============================================ --> <!-- ============================================ -->
<!-- SLIDE 13 : Comment se proteger ? --> <!-- SLIDE 13 : Comment se prot&eacute;ger ? -->
<!-- ============================================ --> <!-- ============================================ -->
<section> <section>
<h1>Comment se proteger ?</h1> <h1>Comment se prot&eacute;ger ?</h1>
<div class="two-cols"> <div class="two-cols">
<div> <div>
<h3>Pour les exchanges / entreprises</h3> <h3>Pour les exchanges / entreprises</h3>
<ul> <ul>
<li>Auditer regulierement les <strong>dependances tierces</strong> (supply chain security)</li> <li>Auditer r&eacute;guli&egrave;rement les <strong>d&eacute;pendances tierces</strong> (supply chain security)</li>
<li>Implementer une approche <strong>zero-trust</strong> pour les outils de signature</li> <li>Impl&eacute;menter une approche <strong>zero-trust</strong> pour les outils de signature</li>
<li>Verifier les transactions au niveau du hardware, pas seulement via une interface web</li> <li>V&eacute;rifier les transactions au niveau du hardware, pas seulement via une interface web</li>
<li>Deployer du <strong>monitoring on-chain</strong> en temps reel pour detecter les mouvements anormaux</li> <li>D&eacute;ployer du <strong>monitoring on-chain</strong> en temps r&eacute;el pour d&eacute;tecter les mouvements anormaux</li>
<li>Pratiquer des exercices de <strong>red team</strong> reguliers</li> <li>Pratiquer des exercices de <strong>red team</strong> r&eacute;guliers</li>
</ul> </ul>
</div> </div>
<div> <div>
@@ -324,40 +345,42 @@
<li>Utiliser des <strong>hardware wallets</strong> (Ledger, Trezor) pour les fonds importants</li> <li>Utiliser des <strong>hardware wallets</strong> (Ledger, Trezor) pour les fonds importants</li>
<li>Ne jamais laisser de grosses sommes sur un exchange</li> <li>Ne jamais laisser de grosses sommes sur un exchange</li>
<li>Activer l'authentification multi-facteurs (MFA) partout</li> <li>Activer l'authentification multi-facteurs (MFA) partout</li>
<li>Se mefier du <strong>phishing</strong> et de l'ingenierie sociale</li> <li>Se m&eacute;fier du <strong>phishing</strong> et de l'ing&eacute;nierie sociale</li>
<li>Diversifier les lieux de stockage</li> <li>Diversifier les lieux de stockage</li>
</ul> </ul>
</div> </div>
</div> </div>
<p>La lecon principale de ce hack : <strong>la securite d'un systeme depend aussi de celle de ses prestataires</strong>.</p> <hr class="matrix-hr">
<div class="matrix-quote">La le&ccedil;on principale de ce hack : <strong>la s&eacute;curit&eacute; d'un syst&egrave;me d&eacute;pend aussi de celle de ses prestataires</strong>.</div>
</section> </section>
<!-- ============================================ --> <!-- ============================================ -->
<!-- SLIDE 14 : Enjeux geopolitiques --> <!-- SLIDE 14 : Enjeux g&eacute;opolitiques -->
<!-- ============================================ --> <!-- ============================================ -->
<section> <section class="data-bg">
<h1>Enjeux geopolitiques</h1> <h1>Enjeux g&eacute;opolitiques</h1>
<div class="two-cols"> <div class="two-cols">
<div> <div>
<h3>Financement etatique</h3> <h3>Financement &eacute;tatique</h3>
<p>Les fonds voles ne servent pas a enrichir des individus. Ils alimentent directement les programmes <strong>nucleaire</strong> et <strong>balistique</strong> de la Coree du Nord.</p> <p>Les fonds vol&eacute;s ne servent pas &agrave; enrichir des individus. Ils alimentent directement les programmes <strong>nucl&eacute;aire</strong> et <strong>balistique</strong> de la Cor&eacute;e du Nord.</p>
<p>Estimations :</p> <div class="matrix-quote">
<ul> <ul>
<li>~50% des revenus en devises de la RPDC proviendraient du cybercrime</li> <li>~50% des revenus en devises de la RPDC proviendraient du cybercrime</li>
<li>Environ 1 700 membres dans la seule unite BlueNorOff</li> <li>Environ 1 700 membres dans la seule unit&eacute; BlueNorOff</li>
<li>Formation des hackers a l'universite Kim Chaek et au Mirim College, avec un passage a Shenyang (Chine)</li> <li>Formation des hackers &agrave; l'universit&eacute; Kim Chaek et au Mirim College, avec un passage &agrave; Shenyang (Chine)</li>
</ul> </ul>
</div>
</div> </div>
<div> <div>
<h3>Cyberguerre asymetrique</h3> <h3>Cyberguerre asym&eacute;trique</h3>
<p>La Coree du Nord dispose de peu de ressources materielles mais presente une <strong>menace asymetrique</strong> considerable dans le cyberespace.</p> <p>La Cor&eacute;e du Nord dispose de peu de ressources mat&eacute;rielles mais pr&eacute;sente une <strong>menace asym&eacute;trique</strong> consid&eacute;rable dans le cyberespace.</p>
<ul> <ul>
<li>Cout d'une operation cyber : faible</li> <li>Co&ucirc;t d'une op&eacute;ration cyber : faible</li>
<li>Rendement potentiel : milliards de dollars</li> <li>Rendement potentiel : milliards de dollars</li>
<li>Risque pour les operateurs : minimal (juridiction nord-coreenne)</li> <li>Risque pour les op&eacute;rateurs : minimal (juridiction nord-cor&eacute;enne)</li>
<li>Difficulte d'attribution et de riposte pour les victimes</li> <li>Difficult&eacute; d'attribution et de riposte pour les victimes</li>
</ul> </ul>
<p>Les sanctions internationales sont contournees par le cyberespace.</p> <p>Les sanctions internationales sont contourn&eacute;es par le cyberespace.</p>
</div> </div>
</div> </div>
<p class="source">Sources : US Army report 2020, Nations Unies, Recorded Future</p> <p class="source">Sources : US Army report 2020, Nations Unies, Recorded Future</p>
@@ -369,13 +392,14 @@
<section> <section>
<h1>Conclusion</h1> <h1>Conclusion</h1>
<ul> <ul>
<li>Le Groupe Lazarus est l'une des menaces cyber les plus actives et les plus financierement devastatrices au monde</li> <li>Le Groupe Lazarus est l'une des menaces cyber les plus actives et les plus financi&egrave;rement d&eacute;vastatrices au monde</li>
<li>Le hack de Bybit (fevrier 2025) est le plus gros vol de cryptomonnaies de l'histoire : <strong>1,5 milliard de dollars</strong></li> <li>Le hack de Bybit (f&eacute;vrier 2025) est le plus gros vol de cryptomonnaies de l'histoire : <strong>1,5 milliard de dollars</strong></li>
<li>L'attaque a exploite une faiblesse dans un <strong>outil tiers</strong> (Safe{Wallet}), pas directement dans les systemes de Bybit</li> <li>L'attaque a exploit&eacute; une faiblesse dans un <strong>outil tiers</strong> (Safe{Wallet}), pas directement dans les syst&egrave;mes de Bybit</li>
<li>La securite de la supply chain logicielle est un enjeu critique pour toute organisation</li> <li>La s&eacute;curit&eacute; de la supply chain logicielle est un enjeu critique pour toute organisation</li>
<li>Le cybercrime etatique nord-coreen represente un defi geopolitique majeur, a l'intersection de la cybersecurite, de la finance et des relations internationales</li> <li>Le cybercrime &eacute;tatique nord-cor&eacute;en repr&eacute;sente un d&eacute;fi g&eacute;opolitique majeur, &agrave; l'intersection de la cybers&eacute;curit&eacute;, de la finance et des relations internationales</li>
</ul> </ul>
<p style="margin-top:1.5em;"><strong>En tant que futurs professionnels de l'informatique</strong>, comprendre ces attaques et les mecanismes de defense associes est essentiel, quelle que soit votre specialisation.</p> <hr class="matrix-hr">
<p style="margin-top:1.5em;"><strong>En tant que futurs professionnels de l'informatique</strong>, comprendre ces attaques et les m&eacute;canismes de d&eacute;fense associ&eacute;s est essentiel, quelle que soit votre sp&eacute;cialisation.</p>
</section> </section>
<!-- ============================================ --> <!-- ============================================ -->
@@ -383,16 +407,16 @@
<!-- ============================================ --> <!-- ============================================ -->
<section class="end-slide"> <section class="end-slide">
<h1>Questions ?</h1> <h1>Questions ?</h1>
<p style="margin-top:1em; color: var(--color-muted); font-family: var(--font-mono);">Merci de votre attention.</p> <p class="terminal-line">echo "Merci de votre attention"</p>
<div style="margin-top:2em; text-align:left; max-width:600px; margin-left:auto; margin-right:auto;"> <div style="margin-top:2em; text-align:left; max-width:600px; margin-left:auto; margin-right:auto;">
<h3>Sources principales</h3> <h3>Sources principales</h3>
<ul style="font-size:0.65em;"> <ul style="font-size:0.65em;">
<li>Wikipedia : Lazarus Group</li> <li>Wikipedia : Lazarus Group</li>
<li>CoinTelegraph : "How the Bybit hack happened" (mars 2025)</li> <li>CoinTelegraph : "How the Bybit hack happened" (mars 2025)</li>
<li>Arkham Intelligence : attribution Lazarus</li> <li>Arkham Intelligence : attribution Lazarus</li>
<li>FBI : communique officiel (fevrier 2025)</li> <li>FBI : communiqu&eacute; officiel (f&eacute;vrier 2025)</li>
<li>Chainalysis : Crypto Crime Report 2024/2025</li> <li>Chainalysis : Crypto Crime Report 2024/2025</li>
<li>MITRE ATT&CK : G0032 Lazarus Group</li> <li>MITRE ATT&amp;CK : G0032 Lazarus Group</li>
<li>US Army : "North Korean Tactics" (ATP 7-100.2, 2020)</li> <li>US Army : "North Korean Tactics" (ATP 7-100.2, 2020)</li>
</ul> </ul>
</div> </div>
@@ -417,6 +441,47 @@
width: 1280, width: 1280,
height: 720 height: 720
}); });
// Matrix Rain Animation
(function() {
var canvas = document.getElementById('matrix-rain');
var ctx = canvas.getContext('2d');
function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resize();
window.addEventListener('resize', resize);
var chars = '01';
var fontSize = 14;
var columns = Math.floor(canvas.width / fontSize);
var drops = [];
for (var i = 0; i < columns; i++) {
drops[i] = Math.random() * canvas.height / fontSize;
}
function draw() {
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#00ff41';
ctx.font = fontSize + 'px monospace';
for (var i = 0; i < drops.length; i++) {
var text = chars.charAt(Math.floor(Math.random() * chars.length));
ctx.fillText(text, i * fontSize, drops[i] * fontSize);
if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
drops[i] = 0;
}
drops[i]++;
}
}
setInterval(draw, 50);
})();
</script> </script>
</body> </body>
</html> </html>