:root {
    --bg-dark: #0B0E14;
    --bg-surface: #13171F;
    --primary: #38BDF8; /* Sky Blue */
    --secondary: #818CF8;
    --text-white: #F1F5F9;
    --text-gray: #94A3B8;
    --border: rgba(255, 255, 255, 0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; }
body { background-color: var(--bg-dark); color: var(--text-white); font-family: 'Inter', sans-serif; overflow-x: hidden; line-height: 1.6; }
h1, h2, h3 { font-family: 'Space Grotesk', sans-serif; color: var(--text-white); }

/* --- GLOBAL LAYOUT --- */
.container { width: 85%; max-width: 1200px; margin: 0 auto; }
.bg-blur-1, .bg-blur-2 { position: fixed; width: 500px; height: 500px; border-radius: 50%; filter: blur(100px); z-index: -1; opacity: 0.15; }
.bg-blur-1 { top: -10%; left: -10%; background: var(--primary); }
.bg-blur-2 { bottom: -10%; right: -10%; background: var(--secondary); }

/* --- NAVIGATION --- */
.navbar { display: flex; justify-content: space-between; align-items: center; padding: 20px 8%; position: fixed; width: 100%; z-index: 1000; background: rgba(11, 14, 20, 0.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.logo { font-size: 1.5rem; font-weight: 700; } .logo .dot { color: var(--primary); }
.nav-links { display: flex; gap: 40px; list-style: none; align-items: center; }
.nav-links a { text-decoration: none; color: var(--text-gray); font-size: 0.95rem; transition: 0.3s; }
.nav-links a:hover, .nav-links a.active { color: var(--text-white); }
.btn-nav { border: 1px solid var(--border); padding: 8px 20px; border-radius: 8px; color: var(--text-white) !important; }
.btn-nav:hover { border-color: var(--primary); background: rgba(56,189,248,0.1); }

/* --- HERO --- */
header { padding-top: 120px; min-height: 100vh; display: flex; align-items: center; }
.hero-container { display: flex; align-items: center; justify-content: space-between; gap: 50px; }
.hero-content { flex: 1; z-index: 2; }
.badge { background: rgba(56, 189, 248, 0.1); color: var(--primary); padding: 6px 12px; border-radius: 20px; font-size: 0.8rem; border: 1px solid rgba(56, 189, 248, 0.2); }
h1 { font-size: 4rem; line-height: 1.1; margin: 25px 0; }
.hero-sub { color: var(--text-gray); margin-bottom: 30px; font-size: 1.1rem; max-width: 500px; }
.terminal-snippet { background: #000; padding: 15px; border-radius: 8px; font-family: monospace; border-left: 3px solid var(--primary); margin-bottom: 30px; width: fit-content; }
.terminal-body p { color: #ddd; font-size: 0.9rem; } .prompt { color: var(--primary); }
.cta-group { display: flex; gap: 15px; }
.btn-primary, .btn-secondary, .btn-view-all { padding: 12px 30px; border-radius: 50px; text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 10px; transition: 0.3s; }
.btn-primary, .btn-view-all { background: var(--primary); color: #000; }
.btn-primary:hover, .btn-view-all:hover { box-shadow: 0 0 20px rgba(56, 189, 248, 0.4); transform: translateY(-2px); }
.btn-secondary { border: 1px solid var(--border); color: var(--text-white); }
.btn-secondary:hover { border-color: var(--text-white); }

.hero-visual { flex: 1; display: flex; justify-content: flex-end; position: relative; }
.avatar-video { width: 100%; max-width: 600px; transform: scaleX(-1); mask-image: linear-gradient(to bottom, black 85%, transparent 100%); }
.visual-circle { position: absolute; width: 400px; height: 400px; background: var(--primary); filter: blur(120px); opacity: 0.2; top: 20%; right: 10%; z-index: -1; }

/* --- EXPERIENCE --- */
#experience { padding: 100px 0; }
.section-title { text-align: center; margin-bottom: 60px; }
.section-title h2 { font-size: 2.5rem; margin-bottom: 10px; }
.timeline { position: relative; max-width: 800px; margin: 0 auto; padding: 20px 0; border-left: 2px solid rgba(56, 189, 248, 0.3); }
.timeline-item { position: relative; padding-left: 30px; margin-bottom: 40px; }
.timeline-item::before { content: ''; position: absolute; left: -6px; top: 5px; width: 10px; height: 10px; background: var(--bg-dark); border: 2px solid var(--primary); border-radius: 50%; }
.timeline-content h3 { font-size: 1.3rem; margin-bottom: 5px; }
.company { color: var(--secondary); font-size: 0.95rem; font-weight: 600; display: block; margin-bottom: 10px; }
.timeline-content ul { list-style: none; color: var(--text-gray); font-size: 0.9rem; }
.timeline-content ul li::before { content: '▹'; margin-right: 8px; color: var(--primary); }
.tech-mini-tags span { font-size: 0.75rem; background: rgba(255,255,255,0.05); padding: 3px 8px; border-radius: 4px; margin-right: 5px; color: var(--text-gray); }

/* --- CERTIFICATIONS --- */
#certifications { padding: 80px 0; background: rgba(255,255,255,0.02); }
.certs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }
.cert-card { background: var(--bg-surface); padding: 30px; border-radius: 12px; border: 1px solid var(--border); text-align: center; transition: 0.3s; }
.cert-card:hover { border-color: var(--primary); transform: translateY(-5px); }
.cert-card i { font-size: 2rem; color: var(--primary); margin-bottom: 15px; }

/* --- SKILLS --- */
#skills { padding: 80px 0; }
.skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; }
.skill-card { background: var(--bg-surface); padding: 20px; border-radius: 12px; border: 1px solid var(--border); text-align: center; transition: 0.3s; }
.skill-card:hover { border-color: var(--primary); transform: translateY(-3px); }
.skill-card i { font-size: 2rem; margin-bottom: 10px; display: block; }

/* --- PRO PROJECTS (TEASER) --- */
#projects { padding: 100px 0; }
.projects-wrapper { display: flex; flex-direction: column; gap: 60px; margin-bottom: 50px; }
.project-item { display: flex; gap: 40px; align-items: center; }
.project-item.reverse { flex-direction: row-reverse; }
.project-info { flex: 1; }
.project-info h3 { font-size: 1.8rem; margin-bottom: 15px; }
.tags span { font-size: 0.8rem; padding: 4px 10px; background: rgba(56, 189, 248, 0.1); color: var(--primary); margin-right: 5px; border-radius: 4px; }
.project-visual { flex: 1; height: 300px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 15px; display: flex; justify-content: center; align-items: center; font-size: 4rem; color: rgba(255,255,255,0.05); }
.view-all-container { text-align: center; margin-top: 40px; }
.btn-view-all { background: transparent; border: 1px solid var(--primary); color: var(--primary); }
.btn-view-all:hover { background: var(--primary); color: #000; }
.confidential { color: #F472B6; font-size: 0.9rem; font-style: italic; }

/* --- PAGE: LAB/ALL PROJECTS --- */
.page-header { padding: 150px 0 80px; text-align: center; }
.page-header h1 { font-size: 3.5rem; margin-bottom: 20px; }
.page-header p { color: var(--text-gray); max-width: 600px; margin: 0 auto; }
.projects-grid-full { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px; padding-bottom: 100px; }
.project-card-full { background: var(--bg-surface); padding: 30px; border-radius: 16px; border: 1px solid var(--border); transition: 0.3s; display: flex; flex-direction: column; }
.project-card-full:hover { transform: translateY(-5px); border-color: var(--primary); }
.p-icon { font-size: 2rem; color: var(--primary); margin-bottom: 20px; }
.project-card-full h3 { font-size: 1.3rem; margin-bottom: 10px; }
.project-card-full p { font-size: 0.9rem; color: var(--text-gray); margin-bottom: 20px; flex-grow: 1; }
.tags-mini span { font-size: 0.75rem; color: var(--secondary); background: rgba(255,255,255,0.05); padding: 3px 8px; border-radius: 4px; margin-right: 5px; }
.card-link { margin-top: auto; text-decoration: none; color: var(--primary); font-size: 0.85rem; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; transition: 0.3s; }
.card-link:hover { gap: 10px; color: var(--text-white); }

/* --- SIDEBAR & FOOTER --- */
footer { padding: 60px 0; text-align: center; border-top: 1px solid var(--border); }
.big-mail { font-size: 2.5rem; color: var(--text-white); text-decoration: none; font-weight: 700; }
.social-sidebar { position: fixed; left: 30px; bottom: 0; display: flex; flex-direction: column; gap: 20px; align-items: center; z-index: 100; }
.social-sidebar a { color: var(--text-gray); font-size: 1.2rem; transition: 0.3s; }
.social-sidebar a:hover { color: var(--primary); transform: translateY(-3px); }
.social-sidebar .line { width: 1px; height: 60px; background: var(--border); margin-top: 10px; }

/* Brand Colors on Hover */
.social-sidebar a:hover .fa-youtube { color: #FF0000; }
.social-sidebar a:hover .fa-instagram { color: #E1306C; }

/* --- RESPONSIVE --- */
.burger { display: none; cursor: pointer; }
.burger div { width: 25px; height: 2px; background: #fff; margin: 5px; }

@media screen and (max-width: 1024px) {
    .hero-container { flex-direction: column-reverse; text-align: center; padding-top: 20px; }
    .hero-content { width: 100%; }
    .hero-visual { width: 100%; justify-content: center; }
    .avatar-video { transform: scaleX(1); max-width: 400px; }
    .project-item { flex-direction: column !important; text-align: left; }
    .social-sidebar { display: none; }
    .page-header h1 { font-size: 2.5rem; }
}

@media screen and (max-width: 768px) {
    .nav-links { display: none; }
    .burger { display: block; }
}
/* --- PROJETS AVEC IMAGES --- */

.project-visual {
    flex: 1;
    height: 300px; /* Hauteur fixe pour que ce soit uniforme */
    border-radius: 20px;
    border: 1px solid var(--border);
    overflow: hidden; /* Important : Coupe l'image si elle dépasse des coins arrondis */
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.project-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* L'image remplit tout le bloc sans être écrasée */
    object-position: center; /* Centre l'image */
    transition: transform 0.5s ease; /* Animation fluide */
    filter: brightness(0.8); /* Assombrit légèrement l'image pour l'ambiance Dark */
}

/* Effet au survol de la souris */
.project-item:hover .project-visual img {
    transform: scale(1.05); /* Zoom léger */
    filter: brightness(1); /* L'image s'éclaire */
}

/* Responsive Mobile */
@media screen and (max-width: 1024px) {
    .project-visual {
        width: 100%; /* Prend toute la largeur sur mobile */
        height: 250px;
    }
}