From da3214fc2e893a2c2eed4755d7d183c7f5d02aed Mon Sep 17 00:00:00 2001
From: Bateast <bateast@noreply.localhost>
Date: Sun, 9 Mar 2025 15:04:49 +0000
Subject: [PATCH] =?UTF-8?q?T=C3=A9l=C3=A9verser=20les=20fichiers=20vers=20?=
 =?UTF-8?q?"Theme-Bento/assets/css"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Theme-Bento/assets/css/_dark.css |  Bin 0 -> 1024 bytes
 Theme-Bento/assets/css/main.css  |   22 +
 Theme-Bento/assets/css/style.css | 1535 ++++++++++++++++++++++++++++++
 3 files changed, 1557 insertions(+)
 create mode 100644 Theme-Bento/assets/css/_dark.css
 create mode 100644 Theme-Bento/assets/css/main.css
 create mode 100644 Theme-Bento/assets/css/style.css

diff --git a/Theme-Bento/assets/css/_dark.css b/Theme-Bento/assets/css/_dark.css
new file mode 100644
index 0000000000000000000000000000000000000000..06d7405020018ddf3cacee90fd4af10487da3d20
GIT binary patch
literal 1024
ScmZQz7zLvtFd70QH3R?z00031

literal 0
HcmV?d00001

diff --git a/Theme-Bento/assets/css/main.css b/Theme-Bento/assets/css/main.css
new file mode 100644
index 0000000..166ade9
--- /dev/null
+++ b/Theme-Bento/assets/css/main.css
@@ -0,0 +1,22 @@
+body {
+  color: #222;
+  font-family: sans-serif;
+  line-height: 1.5;
+  margin: 1rem;
+  max-width: 768px;
+}
+
+header {
+  border-bottom: 1px solid #222;
+  margin-bottom: 1rem;
+}
+
+footer {
+  border-top: 1px solid #222;
+  margin-top: 1rem;
+}
+
+a {
+  color: #00e;
+  text-decoration: none;
+}
diff --git a/Theme-Bento/assets/css/style.css b/Theme-Bento/assets/css/style.css
new file mode 100644
index 0000000..2e1cb12
--- /dev/null
+++ b/Theme-Bento/assets/css/style.css
@@ -0,0 +1,1535 @@
+:root {
+    --background: #ffffff;
+    --text: #000000;
+    --card-bg: #ffffff;
+    --accent: #007AFF;
+    --shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
+    --border: rgba(0, 0, 0, 0.1);
+    --nav-bg: rgba(255, 255, 255, 0.8);
+}
+
+[data-theme="dark"] {
+    --background: #0d0d0d;
+    --text: #ffffff;
+    --card-bg: #1a1a1a;
+    --accent: #0A84FF;
+    --shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.7);
+    --border: rgba(255, 255, 255, 0.1);
+    --nav-bg: rgba(13, 13, 13, 0.8);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background-color: var(--background);
+    color: var(--text);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    line-height: 1.6;
+    transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+/* Header Styles */
+header {
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    background: var(--nav-bg);
+}
+
+nav {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 1rem 2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.logo {
+    font-size: 1.5rem;
+    font-weight: 700;
+    text-decoration: none;
+    color: var(--text);
+    background: linear-gradient(90deg, var(--accent), #00c6ff);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+/* Theme Toggle Button */
+.theme-toggle {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0.5rem;
+    transition: transform 0.3s ease;
+}
+
+.theme-toggle:hover {
+    transform: scale(1.1);
+}
+
+.theme-toggle svg {
+    width: 24px;
+    height: 24px;
+    fill: var(--text);
+}
+
+/* Bento Grid Styles */
+.bento-grid {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    gap: 1.5rem;
+    padding: 1.5rem;
+    max-width: 1400px;
+    margin: 0 auto;
+}
+
+.bento-item {
+    position: relative;
+    border-radius: 24px;
+    overflow: hidden;
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    border: 1px solid var(--border);
+}
+
+/* Variations de tailles */
+.bento-item.size-1 {
+    grid-column: span 3;
+    grid-row: span 1;
+    aspect-ratio: 1;
+}
+
+.bento-item.size-2 {
+    grid-column: span 6;
+    grid-row: span 1;
+    aspect-ratio: 2/1;
+}
+
+.bento-item.size-3 {
+    grid-column: span 6;
+    grid-row: span 2;
+    aspect-ratio: 1;
+}
+
+.bento-item.size-4 {
+    grid-column: span 9;
+    grid-row: span 1;
+    aspect-ratio: 3/1;
+}
+
+.bento-item.size-5 {
+    grid-column: span 4;
+    grid-row: span 2;
+    aspect-ratio: 0.8;
+}
+
+.bento-link {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    height: 100%;
+    text-decoration: none;
+    color: var(--text);
+    position: relative;
+    z-index: 1;
+}
+
+.bento-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+}
+
+.bento-image::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.1) 100%);
+}
+
+.bento-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.bento-content {
+    position: relative;
+    z-index: 2;
+    padding: 2rem;
+    color: white;
+}
+
+.bento-content h2 {
+    font-size: 2rem;
+    margin-bottom: 1rem;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.bento-content p {
+    font-size: 1rem;
+    opacity: 0.9;
+    margin-bottom: 1rem;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+/* CV Button Styles */
+.cv-button {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 1rem 2rem;
+    background: var(--accent);
+    color: white;
+    text-decoration: none;
+    border-radius: 30px;
+    font-weight: 500;
+    transition: all 0.3s ease;
+    margin-top: 2rem;
+    box-shadow: 0 10px 20px -10px var(--accent);
+}
+
+.cv-button svg {
+    width: 20px;
+    height: 20px;
+    fill: currentColor;
+}
+
+.cv-button:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 15px 25px -10px var(--accent);
+}
+
+/* Post Meta Styles */
+.post-meta {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 1rem;
+    font-size: 0.9rem;
+    color: rgba(255, 255, 255, 0.8);
+}
+
+.category {
+    background: var(--accent);
+    padding: 0.2rem 0.8rem;
+    border-radius: 15px;
+    font-size: 0.8rem;
+}
+
+/* Hover Effects */
+.bento-item:hover {
+    transform: translateY(-8px) scale(1.02);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+    border-color: var(--accent);
+}
+
+.bento-item:hover .bento-image img {
+    transform: scale(1.1) rotate(-2deg);
+}
+
+.bento-item:hover .bento-content h2 {
+    transform: translateX(10px);
+    color: var(--accent);
+}
+
+.bento-item::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+        45deg,
+        transparent 0%,
+        rgba(var(--accent-rgb), 0.1) 100%
+    );
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.bento-item:hover::after {
+    opacity: 1;
+}
+
+/* Animation d'apparition */
+@keyframes bentoAppear {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.bento-item {
+    animation: bentoAppear 0.5s ease-out forwards;
+    animation-delay: calc(var(--order) * 0.1s);
+    opacity: 0;
+}
+
+/* Responsive Design */
+@media (max-width: 1200px) {
+    .bento-item.size-4 {
+        grid-column: span 12;
+    }
+    .bento-item.size-3 {
+        grid-column: span 8;
+    }
+}
+
+@media (max-width: 768px) {
+    .bento-grid {
+        grid-template-columns: repeat(6, 1fr);
+        gap: 1rem;
+        padding: 1rem;
+    }
+
+    .bento-item.size-1,
+    .bento-item.size-2,
+    .bento-item.size-3,
+    .bento-item.size-4,
+    .bento-item.size-5 {
+        grid-column: span 6;
+        grid-row: span 1;
+        aspect-ratio: 16/9;
+    }
+}
+
+@media (max-width: 480px) {
+    .bento-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* Animations */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.bento-item {
+    animation: fadeIn 0.5s ease forwards;
+}
+
+/* Hero Container */
+.hero-container {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 2rem;
+    position: relative;
+}
+
+.hero-section {
+    text-align: center;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+/* Scroll Indicator */
+.scroll-indicator {
+    position: absolute;
+    bottom: 2rem;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.chevron {
+    width: 28px;
+    height: 8px;
+    opacity: 0;
+    transform: scale(0.3);
+    animation: move-chevron 3s ease-out infinite;
+}
+
+.chevron:first-child {
+    animation: move-chevron 3s ease-out 1s infinite;
+}
+
+.chevron:nth-child(2) {
+    animation: move-chevron 3s ease-out 2s infinite;
+}
+
+.chevron:before,
+.chevron:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    height: 100%;
+    width: 50%;
+    background: var(--accent);
+}
+
+.chevron:before {
+    left: 0;
+    transform: skewY(30deg);
+}
+
+.chevron:after {
+    right: 0;
+    width: 50%;
+    transform: skewY(-30deg);
+}
+
+@keyframes move-chevron {
+    25% {
+        opacity: 1;
+        transform: translateY(9px) scale(0.8);
+    }
+    33% {
+        opacity: 1;
+        transform: translateY(18px) scale(0.8);
+    }
+    67% {
+        opacity: 1;
+        transform: translateY(18px) scale(0.8);
+    }
+    100% {
+        opacity: 0;
+        transform: translateY(27px) scale(0.8);
+    }
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .hero-container {
+        padding: 1rem;
+        min-height: calc(100vh - 60px);
+    }
+
+    .scroll-indicator {
+        bottom: 1rem;
+    }
+
+    .chevron {
+        width: 24px;
+        height: 6px;
+    }
+}
+
+@media (max-height: 700px) {
+    .hero-container {
+        min-height: auto;
+        padding-top: 2rem;
+        padding-bottom: 4rem;
+    }
+}
+
+/* Hero Section Styles */
+.profile-video {
+    position: relative;
+    margin-bottom: 2rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
+}
+
+.profile-video video {
+    width: 300px;
+    height: 300px;
+    object-fit: cover;
+    margin-bottom: -20px;
+}
+
+.intro-text {
+    font-size: 1.5rem;
+    font-weight: 500;
+    color: var(--text);
+    padding: 0.5rem 1.5rem;
+    border-radius: 20px;
+    background: var(--card-bg);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+
+.intro-text .highlight {
+    color: var(--accent);
+    font-weight: 600;
+    background: linear-gradient(90deg, var(--accent), #00c6ff);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    padding: 0 0.2rem;
+}
+
+.waving-hand {
+    display: inline-block;
+    font-size: 1.6rem;
+    margin: 0 0.2rem;
+    animation: wave 2.5s infinite;
+    transform-origin: 70% 70%;
+    vertical-align: middle;
+}
+
+.title-highlight {
+    font-size: 2.8rem;
+    line-height: 1.3;
+    margin: 2rem 0;
+    background: linear-gradient(90deg, var(--accent), #00c6ff);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-weight: 700;
+}
+
+.roles {
+    font-size: 1.4rem;
+    margin: 2rem 0;
+    color: var(--text);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .hero-section {
+        padding: 2rem 1rem;
+    }
+
+    .profile-video video {
+        width: 180px;
+        height: 180px;
+    }
+
+    .intro-text {
+        font-size: 1.2rem;
+        padding: 0.4rem 1rem;
+    }
+
+    .title-highlight {
+        font-size: 2rem;
+    }
+
+    .roles {
+        font-size: 1.2rem;
+    }
+}
+
+/* Footer Styles - sans la bordure */
+.footer {
+    padding: 1.5rem;
+    text-align: center;
+    margin-top: 2rem;
+}
+
+.footer p {
+    color: #888;  /* Gris pour le texte */
+    font-size: 0.9rem;  /* Taille de texte légèrement réduite */
+    margin: 0;
+}
+
+.footer .highlight {
+    color: var(--accent);  /* Utilise la couleur d'accent pour le nom */
+    font-weight: 500;
+    transition: color 0.3s ease;
+}
+
+.footer .highlight:hover {
+    color: var(--text);  /* Change la couleur au survol */
+}
+
+.code {
+    font-family: monospace;
+    color: var(--accent);
+}
+
+.heart {
+    color: #ff3366;
+    display: inline-block;
+    animation: pulse 1.5s infinite;
+}
+
+/* Animations */
+@keyframes pulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.1); }
+    100% { transform: scale(1); }
+}
+
+/* Highlight effect */
+.highlight {
+    background: linear-gradient(90deg, var(--accent), #00c6ff);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-weight: 700;
+}
+
+/* Companies Section */
+.companies-section {
+    padding: 4rem 2rem;
+    text-align: center;
+    max-width: 1200px;
+    margin: 0 auto;
+    margin-top: 2rem;
+}
+
+.companies-section h2 {
+    font-size: 1.5rem;
+    margin-bottom: 2rem;
+    color: var(--text);
+    position: relative;
+    display: inline-block;
+    opacity: 0.8;
+}
+
+.companies-section h2::after {
+    content: '';
+    position: absolute;
+    bottom: -10px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 50%;
+    height: 3px;
+    background: linear-gradient(90deg, var(--accent), #00c6ff);
+    border-radius: 2px;
+}
+
+.company-logos {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 2rem;
+    margin: 0 auto;
+    max-width: 900px;
+}
+
+.logo-item {
+    padding: 2rem;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    box-shadow: none;
+    border: none;
+}
+
+.logo-item:hover {
+    transform: translateY(-5px);
+    box-shadow: none;
+    border: none;
+}
+
+.logo-item img {
+    max-width: 120px;
+    height: auto;
+    filter: grayscale(100%);
+    opacity: 0.7;
+    transition: all 0.3s ease;
+}
+
+.logo-item:hover img {
+    filter: grayscale(0%);
+    opacity: 1;
+}
+
+/* Responsive Design for Companies Section */
+@media (max-width: 768px) {
+    .company-logos {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 1rem;
+    }
+
+    .companies-section {
+        padding: 2rem 1rem;
+    }
+
+    .companies-section h2 {
+        font-size: 1.2rem;
+        margin-bottom: 1.5rem;
+    }
+
+    .logo-item img {
+        max-width: 80px;
+    }
+}
+
+@media (max-width: 480px) {
+    .company-logos {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* Styles pour la barre de recherche et les icônes */
+.nav-right {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+}
+
+.search-bar {
+    display: flex;
+    align-items: center;
+    background: var(--card-bg);
+    border-radius: 8px;
+    padding: 0.5rem 1rem;
+    width: 200px;
+    transition: all 0.3s ease;
+}
+
+.search-bar:focus-within {
+    width: 300px;
+    box-shadow: 0 0 0 2px var(--accent);
+}
+
+.search-bar input {
+    border: none;
+    background: none;
+    outline: none;
+    color: var(--text);
+    width: 100%;
+    font-size: 0.9rem;
+    margin-left: 0.5rem;
+}
+
+.search-bar .search-icon {
+    width: 16px;
+    height: 16px;
+    fill: var(--text);
+    opacity: 0.6;
+}
+
+.nav-icons {
+    display: flex;
+    gap: 1rem;
+}
+
+.nav-icon {
+    width: 24px;
+    height: 24px;
+    fill: var(--text);
+    opacity: 0.8;
+    transition: all 0.3s ease;
+}
+
+.nav-icon:hover {
+    opacity: 1;
+    transform: scale(1.1);
+}
+
+/* Styles pour le défilement des logos */
+.logo-scroll {
+    width: 100%;
+    overflow: hidden;
+    position: relative;
+    padding: 2rem 0;
+}
+
+.logo-track {
+    display: flex;
+    animation: scroll 30s linear infinite;
+}
+
+.logo-container {
+    display: flex;
+    gap: 4rem;
+    padding: 0 2rem;
+}
+
+.logo-container img {
+    height: 40px;
+    width: auto;
+    filter: grayscale(100%);
+    opacity: 0.7;
+    transition: all 0.3s ease;
+}
+
+.logo-container img:hover {
+    filter: grayscale(0%);
+    opacity: 1;
+}
+
+@keyframes scroll {
+    0% {
+        transform: translateX(0);
+    }
+    100% {
+        transform: translateX(-50%);
+    }
+}
+
+/* Media Queries */
+@media (max-width: 768px) {
+    .search-bar {
+        display: none;
+    }
+    
+    .nav-icons {
+        gap: 0.5rem;
+    }
+    
+    .nav-icon {
+        width: 20px;
+        height: 20px;
+    }
+}
+
+/* Styles pour le menu mobile */
+.mobile-menu-toggle {
+    display: none;
+    background: none;
+    border: none;
+    padding: 0.5rem;
+    cursor: pointer;
+}
+
+.mobile-menu-toggle svg {
+    width: 24px;
+    height: 24px;
+    fill: var(--text);
+}
+
+.mobile-menu {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--background);
+    z-index: 1000;
+    padding: 2rem;
+    transform: translateX(100%);
+    transition: transform 0.3s ease;
+}
+
+.mobile-menu.active {
+    transform: translateX(0);
+}
+
+.mobile-menu-header {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-bottom: 2rem;
+    position: relative;
+}
+
+.mobile-menu-close {
+    position: absolute;
+    top: -1rem;
+    right: -1rem;
+    background: none;
+    border: none;
+    padding: 0.5rem;
+    cursor: pointer;
+    z-index: 1001;
+}
+
+.mobile-menu-close svg {
+    width: 24px;
+    height: 24px;
+    fill: var(--text);
+    transition: transform 0.3s ease;
+}
+
+.mobile-menu-close:hover svg {
+    transform: rotate(90deg);
+}
+
+.mobile-menu-content {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.mobile-menu-item {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem;
+    text-decoration: none;
+    color: var(--text);
+    border-radius: 8px;
+    transition: background-color 0.3s ease;
+}
+
+.mobile-menu-item:hover {
+    background: var(--card-bg);
+}
+
+.mobile-menu-item svg {
+    width: 24px;
+    height: 24px;
+    fill: var(--text);
+}
+
+/* Media Queries */
+@media (max-width: 768px) {
+    .desktop-nav {
+        display: none;
+    }
+
+    .mobile-menu-toggle {
+        display: block;
+    }
+
+    .mobile-menu {
+        display: block;
+    }
+}
+
+/* Blog Grid Styles */
+.blog-container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 2rem;
+}
+
+.blog-title {
+    font-size: 3rem;
+    margin-bottom: 3rem;
+    text-align: center;
+    background: linear-gradient(90deg, var(--accent), #00c6ff);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.blog-grid {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    gap: 2rem;
+    margin: 2rem 0;
+}
+
+.bento-item {
+    background: var(--card-bg);
+    border-radius: 20px;
+    overflow: hidden;
+    transition: all 0.3s ease;
+    border: 1px solid var(--border);
+}
+
+.bento-item.large {
+    grid-column: span 6;
+    grid-row: span 2;
+}
+
+.bento-item.medium {
+    grid-column: span 6;
+    grid-row: span 1;
+}
+
+.bento-item.small {
+    grid-column: span 4;
+    grid-row: span 1;
+}
+
+.bento-link {
+    display: block;
+    height: 100%;
+    text-decoration: none;
+    color: var(--text);
+}
+
+.bento-image {
+    width: 100%;
+    height: 200px;
+    overflow: hidden;
+}
+
+.bento-item.large .bento-image {
+    height: 300px;
+}
+
+.bento-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.3s ease;
+}
+
+.bento-content {
+    padding: 1.5rem;
+}
+
+.bento-item:hover {
+    transform: translateY(-5px);
+    box-shadow: var(--shadow);
+}
+
+.bento-item:hover .bento-image img {
+    transform: scale(1.05);
+}
+
+/* Single Post Styles */
+.blog-post {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 2rem;
+}
+
+.post-header {
+    text-align: center;
+    margin-bottom: 3rem;
+}
+
+.post-header h1 {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+}
+
+.post-meta {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    color: var(--text);
+    opacity: 0.8;
+}
+
+.post-hero {
+    margin: -2rem -2rem 2rem;
+    height: 400px;
+    overflow: hidden;
+}
+
+.post-hero img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.post-content {
+    line-height: 1.8;
+    font-size: 1.1rem;
+}
+
+.post-footer {
+    margin-top: 4rem;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+}
+
+.post-nav {
+    padding: 1rem;
+    border-radius: 10px;
+    text-decoration: none;
+    color: var(--text);
+    background: var(--card-bg);
+    transition: all 0.3s ease;
+}
+
+.post-nav:hover {
+    transform: translateY(-3px);
+    box-shadow: var(--shadow);
+}
+
+.post-nav span {
+    font-size: 0.9rem;
+    opacity: 0.8;
+}
+
+.post-nav h3 {
+    margin-top: 0.5rem;
+    font-size: 1.1rem;
+}
+
+.category {
+    display: inline-block;
+    padding: 0.2rem 0.8rem;
+    border-radius: 20px;
+    background: var(--accent);
+    color: white;
+    font-size: 0.8rem;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .blog-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .bento-item.large,
+    .bento-item.medium,
+    .bento-item.small {
+        grid-column: span 1;
+        grid-row: span 1;
+    }
+
+    .post-hero {
+        height: 250px;
+        margin: -1rem -1rem 1rem;
+    }
+
+    .post-header h1 {
+        font-size: 2rem;
+    }
+
+    .post-footer {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* 404 Page Styles */
+.error-page {
+    min-height: calc(100vh - 200px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+    background: linear-gradient(135deg, var(--background) 0%, var(--card-bg) 100%);
+}
+
+.error-content {
+    text-align: center;
+    max-width: 600px;
+    animation: fadeIn 0.5s ease-out;
+}
+
+.error-code {
+    font-size: 8rem;
+    font-weight: 700;
+    line-height: 1;
+    margin-bottom: 1rem;
+    background: linear-gradient(135deg, var(--accent) 0%, #00c6ff 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+}
+
+.error-content h1 {
+    font-size: 2.5rem;
+    margin-bottom: 1rem;
+    color: var(--text);
+}
+
+.error-content p {
+    font-size: 1.2rem;
+    color: var(--text);
+    opacity: 0.8;
+    margin-bottom: 2rem;
+}
+
+.error-illustration {
+    margin: 3rem 0;
+    position: relative;
+}
+
+.astronaut {
+    width: 120px;
+    height: 120px;
+    margin: 0 auto;
+    animation: float 6s ease-in-out infinite;
+}
+
+.astronaut svg {
+    width: 100%;
+    height: 100%;
+    fill: var(--accent);
+    opacity: 0.9;
+}
+
+.home-button {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 1rem 2rem;
+    background: var(--accent);
+    color: white;
+    text-decoration: none;
+    border-radius: 30px;
+    font-weight: 500;
+    transition: all 0.3s ease;
+    box-shadow: 0 10px 20px -10px var(--accent);
+}
+
+.home-button svg {
+    width: 20px;
+    height: 20px;
+    fill: currentColor;
+}
+
+.home-button:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 15px 25px -10px var(--accent);
+}
+
+@keyframes float {
+    0%, 100% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-20px);
+    }
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .error-code {
+        font-size: 6rem;
+    }
+
+    .error-content h1 {
+        font-size: 2rem;
+    }
+
+    .error-content p {
+        font-size: 1rem;
+    }
+
+    .astronaut {
+        width: 80px;
+        height: 80px;
+    }
+}
+
+.cv-button-container {
+    text-align: center;
+    margin: -1rem auto 3rem;
+    padding: 0 1rem;
+    max-width: 1400px;
+}
+
+.button-group {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.primary-button,
+.secondary-button {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 1rem 2rem;
+    border-radius: 30px;
+    font-weight: 500;
+    transition: all 0.3s ease;
+    text-decoration: none;
+}
+
+.primary-button {
+    background: var(--accent);
+    color: white;
+    box-shadow: 0 10px 20px -10px var(--accent);
+}
+
+.secondary-button {
+    background: var(--card-bg);
+    color: var(--accent);
+    border: 2px solid var(--accent);
+    box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.1);
+}
+
+.primary-button svg,
+.secondary-button svg {
+    width: 20px;
+    height: 20px;
+    fill: currentColor;
+}
+
+.primary-button:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 15px 25px -10px var(--accent);
+}
+
+.secondary-button:hover {
+    transform: translateY(-3px);
+    background: var(--accent);
+    color: white;
+    box-shadow: 0 15px 25px -10px var(--accent);
+}
+
+/* Responsive Design */
+@media (max-width: 480px) {
+    .button-group {
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .primary-button,
+    .secondary-button {
+        width: 100%;
+        justify-content: center;
+    }
+}
+
+/* Typewriter Animation Styles */
+.typewriter {
+    position: relative;
+    color: var(--accent);
+    font-weight: 500;
+}
+
+.typewriter::after {
+    content: '|';
+    position: absolute;
+    right: -4px;
+    width: 1px;
+    animation: cursor 1s infinite;
+}
+
+@keyframes cursor {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0; }
+}
+
+.typewriter-text {
+    display: inline-block;
+}
+
+/* Waving Hand Animation */
+.waving-hand {
+    display: inline-block;
+    animation: wave 2.5s infinite;
+    transform-origin: 70% 70%;
+}
+
+@keyframes wave {
+    0% { transform: rotate(0deg); }
+    10% { transform: rotate(14deg); }
+    20% { transform: rotate(-8deg); }
+    30% { transform: rotate(14deg); }
+    40% { transform: rotate(-4deg); }
+    50% { transform: rotate(10deg); }
+    60% { transform: rotate(0deg); }
+    100% { transform: rotate(0deg); }
+}
+
+/* About Section Styles */
+.about-section {
+    text-align: center;
+    padding: 4rem 2rem;
+    max-width: 900px;
+    margin: 0 auto;
+    background: var(--card-bg);
+    border-radius: 20px;
+    box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.1);
+}
+
+.about-content {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
+
+.tech-stack {
+    display: flex;
+    gap: 1.2rem;
+    justify-content: center;
+    flex-wrap: wrap;
+    margin-top: 1rem;
+    padding: 0.5rem;
+}
+
+.tech-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.8rem;
+    background: linear-gradient(135deg, var(--accent), #00c6ff);
+    color: white;
+    padding: 0.8rem 1.5rem;
+    border-radius: 30px;
+    font-weight: 500;
+    font-size: 1rem;
+    box-shadow: 0 4px 15px -3px rgba(var(--accent-rgb), 0.4);
+    transition: all 0.3s ease;
+}
+
+.tech-icon {
+    width: 24px;
+    height: 24px;
+    fill: currentColor;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .about-section {
+        padding: 2rem 1.5rem;
+        margin: 1rem;
+    }
+
+    .about-intro {
+        font-size: 1.2rem;
+    }
+
+    .tech-description {
+        font-size: 1.1rem;
+    }
+
+    .tech-stack {
+        gap: 1rem;
+        padding: 1rem 0.5rem;
+    }
+
+    .tech-pill {
+        padding: 0.7rem 1.2rem;
+        font-size: 0.9rem;
+        min-width: calc(50% - 1rem); /* Pour avoir 2 par ligne */
+        justify-content: center;
+    }
+
+    .tech-icon {
+        width: 20px;
+        height: 20px;
+    }
+}
+
+@media (max-width: 480px) {
+    .tech-stack {
+        flex-direction: column;
+        gap: 1rem;
+        align-items: stretch;
+    }
+
+    .tech-pill {
+        min-width: auto;
+        padding: 0.8rem 1rem;
+        justify-content: center;
+    }
+}
+
+/* Scroll Arrow */
+.scroll-arrow {
+    margin-top: 3rem;
+    animation: bounce 2s infinite;
+}
+
+.scroll-arrow svg {
+    width: 40px;
+    height: 40px;
+    fill: var(--accent);
+    opacity: 0.8;
+    transition: all 0.3s ease;
+}
+
+.scroll-arrow:hover svg {
+    opacity: 1;
+    transform: translateY(5px);
+}
+
+@keyframes bounce {
+    0%, 20%, 50%, 80%, 100% {
+        transform: translateY(0);
+    }
+    40% {
+        transform: translateY(-20px);
+    }
+    60% {
+        transform: translateY(-10px);
+    }
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .scroll-arrow {
+        margin-top: 2rem;
+    }
+
+    .scroll-arrow svg {
+        width: 32px;
+        height: 32px;
+    }
+}
+
+/* Skills Section */
+.skills-section {
+    padding: 4rem 2rem;
+    max-width: 900px;
+    margin: 0 auto;
+}
+
+.skills-content {
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.skills-section h2 {
+    text-align: center;
+    margin-bottom: 3rem;
+    color: var(--text);
+    font-size: 1.8rem;
+    font-weight: 600;
+}
+
+.skills-container {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.skill-item {
+    width: 100%;
+}
+
+.skill-info {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0.5rem;
+}
+
+.skill-name {
+    color: var(--text);
+    font-weight: 500;
+}
+
+.skill-percentage {
+    color: var(--accent);
+    font-weight: 600;
+}
+
+.skill-bar {
+    height: 8px;
+    background: rgba(var(--accent-rgb), 0.1);
+    border-radius: 4px;
+    overflow: hidden;
+}
+
+.skill-progress {
+    height: 100%;
+    background: linear-gradient(90deg, var(--accent), #00c6ff);
+    border-radius: 4px;
+    width: 0;
+    transition: width 1.5s ease-out;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .skills-section {
+        padding: 2rem 1rem;
+    }
+
+    .skills-section h2 {
+        font-size: 1.5rem;
+        margin-bottom: 2rem;
+    }
+
+    .skills-container {
+        gap: 1.2rem;
+    }
+
+    .skill-bar {
+        height: 6px;
+    }
+}