/* Variables CSS */
:root {
    --primary: #6366f1;
    --secondary: #8b5cf6;
    --accent: #ec4899;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --dark: #0f172a;
    --light: #f8fafc;
    --text: #1e293b;
    --text-light: #64748b;
    --border: #e2e8f0;
    --shadow: 0 4px 6px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 30px rgba(0,0,0,0.15);
    --shadow-xl: 0 20px 50px rgba(0,0,0,0.2);
    --transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    --transition-bounce: all 0.5s cubic-bezier(0.68,-0.55,0.265,1.55);
    --gradient: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
    --gradient-2: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
    --gradient-3: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
    --glow: 0 0 20px rgba(99,102,241,0.5);
}

[data-theme="dark"] {
    --dark: #f8fafc;
    --light: #0f172a;
    --text: #f1f5f9;
    --text-light: #cbd5e1;
    --border: #334155;
}

* {margin:0;padding:0;box-sizing:border-box}
*::selection {background:var(--primary);color:white}
html {scroll-behavior:smooth;font-size:16px}
body {font-family:'Inter',-apple-system,sans-serif;background:var(--light);color:var(--text);line-height:1.6;overflow-x:hidden;position:relative}
body::before {content:'';position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 50%, rgba(99,102,241,0.05) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(236,72,153,0.05) 0%, transparent 50%);pointer-events:none;z-index:-1}

/* Loader */
.loader {position:fixed;top:0;left:0;width:100%;height:100%;background:var(--dark);display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity 0.5s}
.loader.hidden {opacity:0;pointer-events:none}
.spinner {width:50px;height:50px;border:4px solid rgba(255,255,255,0.1);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin {to{transform:rotate(360deg)}}

/* Cursor personnalisé */
.cursor,.cursor-follower {position:fixed;border-radius:50%;pointer-events:none;z-index:9998;transition:transform 0.2s}
.cursor {width:10px;height:10px;background:var(--primary);mix-blend-mode:difference;box-shadow:0 0 10px var(--primary)}
.cursor-follower {width:40px;height:40px;border:2px solid var(--primary);opacity:0.5;animation:pulse 2s infinite}
.cursor.active {transform:scale(2);background:var(--accent)}
.cursor-follower.active {transform:scale(1.5);border-color:var(--accent)}

/* Particules */
#particles {position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;opacity:0.3}

/* Barre de progression */
.reading-progress {position:fixed;top:0;left:0;height:3px;background:var(--gradient);z-index:9997;transition:width 0.1s}

/* Navigation */
.navbar {position:fixed;top:0;width:100%;background:rgba(255,255,255,0.98);backdrop-filter:blur(20px);box-shadow:0 4px 30px rgba(0,0,0,0.1);z-index:1000;padding:1.2rem 0;transition:var(--transition);border-bottom:3px solid transparent}
.navbar::before {content:'';position:absolute;bottom:0;left:0;width:100%;height:3px;background:var(--gradient);transform:scaleX(0);transition:transform 0.3s}
.navbar.scrolled {padding:0.8rem 0;box-shadow:0 8px 40px rgba(99,102,241,0.15);border-bottom-color:transparent}
.navbar.scrolled::before {transform:scaleX(1)}
.nav-container {max-width:1400px;margin:0 auto;padding:0 3rem;display:grid;grid-template-columns:auto 1fr auto auto;gap:2rem;align-items:center}
.logo {font-size:2rem;font-weight:900;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-decoration:none;transition:var(--transition-bounce);letter-spacing:-1px;position:relative}
.logo::after {content:'';position:absolute;bottom:-5px;left:0;width:0;height:3px;background:var(--gradient);transition:width 0.3s}
.logo:hover::after {width:100%}
.logo:hover {transform:scale(1.08) translateY(-2px);filter:brightness(1.2)}
.nav-menu {display:flex;gap:2rem;list-style:none}
.nav-menu a {color:var(--text);text-decoration:none;font-weight:600;transition:var(--transition);display:flex;align-items:center;gap:0.5rem;position:relative;padding:0.5rem 1rem;border-radius:10px}
.nav-menu a::before {content:'';position:absolute;bottom:0;left:50%;width:0;height:2px;background:var(--gradient);transition:width 0.3s,left 0.3s}
.nav-menu a:hover::before {width:100%;left:0}
.nav-menu a:hover {color:var(--primary);transform:translateY(-3px);background:rgba(99,102,241,0.05)}
.nav-menu a.active {color:var(--primary);background:rgba(99,102,241,0.1)}
.nav-actions {display:flex;gap:1rem;align-items:center}
.theme-toggle,.lang-toggle,.menu-toggle {background:none;border:none;font-size:1.2rem;color:var(--text);cursor:pointer;transition:var(--transition);padding:0.5rem}
.theme-toggle:hover {transform:rotate(20deg);color:var(--primary)}
.menu-toggle {display:none}

.lang-selector {position:relative}
.lang-toggle {display:flex;align-items:center;gap:0.5rem;background:rgba(99,102,241,0.1);padding:0.5rem 1rem;border-radius:20px;font-weight:600;border:2px solid transparent;transition:var(--transition-bounce)}
.lang-toggle:hover {background:var(--primary);color:white;border-color:var(--primary);transform:translateY(-2px)}
.lang-dropdown {position:absolute;top:calc(100% + 0.5rem);right:0;background:white;border-radius:15px;box-shadow:var(--shadow-xl);padding:0.5rem;min-width:180px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:var(--transition);z-index:1000}
.lang-selector:hover .lang-dropdown {opacity:1;visibility:visible;transform:translateY(0)}
.lang-dropdown button {width:100%;text-align:left;padding:0.8rem 1rem;border:none;background:transparent;cursor:pointer;border-radius:10px;transition:var(--transition);display:flex;align-items:center;gap:0.8rem;font-size:1rem;color:var(--text)}
.lang-dropdown button:hover {background:var(--gradient);color:white;transform:translateX(5px)}
.flag {font-size:1.5rem}

/* Version Switcher */
.version-switcher {display:flex;gap:0.5rem}
.version-btn {padding:0.4rem 0.8rem;border:2px solid var(--primary);border-radius:20px;background:transparent;color:var(--text);text-decoration:none;font-weight:600;font-size:0.85rem;transition:var(--transition)}
.version-btn:hover,.version-btn.active {background:var(--primary);color:white}

/* Menu mobile */
.mobile-menu {position:fixed;top:0;right:-100%;width:300px;height:100vh;background:var(--light);box-shadow:var(--shadow-lg);z-index:1001;padding:2rem;transition:right 0.3s}
.mobile-menu.active {right:0}
.close-menu {position:absolute;top:1rem;right:1rem;background:none;border:none;font-size:1.5rem;cursor:pointer}
.mobile-menu ul {list-style:none;margin-top:3rem}
.mobile-menu li {margin:1.5rem 0}
.mobile-menu a {color:var(--text);text-decoration:none;font-size:1.2rem;font-weight:600;transition:var(--transition)}
.mobile-menu a:hover {color:var(--primary);padding-left:1rem}

/* Hero */
.hero {min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea 0%,#764ba2 50%,#f093fb 100%);position:relative;overflow:hidden;padding:2rem}
.hero::before {content:'';position:absolute;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,0.15) 2px,transparent 2px);background-size:60px 60px;animation:moveGrid 25s linear infinite;opacity:0.6}
.hero::after {content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.2) 50%, transparent 70%);animation:shine 4s infinite}
@keyframes moveGrid {to{transform:translate(50px,50px)}}
@keyframes shine {0%,100%{transform:translateX(-100%)}50%{transform:translateX(100%)}}
.hero-content {text-align:center;color:white;z-index:1;animation:fadeInUp 1s}
.hero-badge {display:inline-block;background:rgba(255,255,255,0.2);padding:0.5rem 1.5rem;border-radius:30px;margin-bottom:1rem;font-weight:600;backdrop-filter:blur(10px)}
.hero-title {font-size:5rem;font-weight:900;margin-bottom:1.5rem;color:white;animation:slideInDown 1s;text-shadow:0 5px 30px rgba(0,0,0,0.3),0 0 60px rgba(255,255,255,0.5);letter-spacing:-3px;position:relative}
.hero-title::after {content:attr(data-i18n);position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to right,rgba(255,255,255,0.8),rgba(255,255,255,0.4));-webkit-background-clip:text;-webkit-text-fill-color:transparent;z-index:-1;filter:blur(20px)}
.hero-subtitle {font-size:1.8rem;margin-bottom:2.5rem;opacity:0.95;font-weight:500}
.hero-tags {display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:2rem}
.hero-tags span {background:rgba(255,255,255,0.2);padding:0.5rem 1rem;border-radius:20px;backdrop-filter:blur(10px);display:flex;align-items:center;gap:0.5rem}
.hero-buttons {display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:3rem}
.btn {padding:1rem 2rem;border-radius:50px;text-decoration:none;font-weight:600;transition:var(--transition-bounce);display:inline-flex;align-items:center;gap:0.5rem;border:none;cursor:pointer;font-size:1rem;position:relative;overflow:hidden}
.btn::before {content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,0.3);transition:width 0.6s,height 0.6s,top 0.6s,left 0.6s}
.btn:hover::before {width:300px;height:300px;top:-150px;left:-150px}
.btn-primary {background:white;color:var(--primary);box-shadow:0 4px 15px rgba(255,255,255,0.3)}
.btn-secondary {background:rgba(255,255,255,0.2);color:white;backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,0.3)}
.btn-outline {background:transparent;color:white;border:2px solid white}
.btn:hover {transform:translateY(-5px) scale(1.05);box-shadow:0 15px 40px rgba(0,0,0,0.3)}
.btn:active {transform:translateY(-2px) scale(0.98)}
.hero-stats {display:flex;gap:3rem;justify-content:center;margin-top:3rem}
.stat {text-align:center}
.stat-number {font-size:3rem;font-weight:900;display:block}
.stat p {opacity:0.8;margin-top:0.5rem}
.scroll-indicator {position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);color:white;font-size:2rem;animation:bounce 2s infinite}
@keyframes bounce {0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(10px)}}
@keyframes fadeInUp {from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideInDown {from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}

/* Section */
.section {padding:6rem 0;position:relative}
.bg-alt {background:#f8fafc}
.container {max-width:1200px;margin:0 auto;padding:0 2rem}
.section-title {font-size:3rem;text-align:center;margin-bottom:4rem;color:var(--text);position:relative;padding-bottom:1.5rem;animation:fadeInUp 0.8s;font-weight:900;letter-spacing:-1px}
.section-title::after {content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:80px;height:4px;background:var(--gradient);border-radius:2px;animation:expandWidth 1s ease-out}
.section-title::before {content:'';position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:120px;height:4px;background:var(--gradient);border-radius:2px;opacity:0.3;filter:blur(5px)}
@keyframes expandWidth {from{width:0}to{width:80px}}

/* À propos */
.about-content {display:grid;grid-template-columns:1.2fr 0.8fr;gap:4rem;align-items:center;padding:2rem 0}
.lead {font-size:1.3rem;font-weight:600;margin-bottom:1.5rem;color:var(--primary)}

/* Qui suis-je section */
.about-intro {background:linear-gradient(135deg,rgba(99,102,241,0.05),rgba(139,92,246,0.05));padding:2.5rem;border-radius:20px;border-left:5px solid var(--primary);margin-bottom:3rem;box-shadow:0 10px 30px rgba(0,0,0,0.05);position:relative;overflow:hidden}
.about-intro::before {content:'';position:absolute;top:0;right:0;width:200px;height:200px;background:radial-gradient(circle,rgba(99,102,241,0.1),transparent);border-radius:50%}
.about-intro h3 {font-size:2rem;font-weight:800;color:var(--primary);margin-bottom:1.5rem;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.about-intro p {font-size:1.1rem;line-height:1.9;color:var(--text);margin-bottom:1.3rem;position:relative;z-index:1}
.about-intro p:first-of-type {font-size:1.15rem;font-weight:500;color:var(--text)}
.about-intro strong {color:var(--primary);font-weight:700;background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.about-highlights {display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem}
.highlight-item {text-align:center;padding:2rem 1.5rem;background:white;border-radius:20px;box-shadow:0 8px 25px rgba(0,0,0,0.08);transition:var(--transition-bounce);position:relative;overflow:hidden;border:2px solid transparent;cursor:pointer}
.highlight-item::before {content:'';position:absolute;top:0;left:0;width:100%;height:4px;background:var(--gradient);transform:scaleX(0);transition:transform 0.3s}
.highlight-item:hover::before {transform:scaleX(1)}
.highlight-item:hover {transform:translateY(-18px) scale(1.08);box-shadow:0 20px 40px rgba(99,102,241,0.2);border-color:var(--primary)}
.highlight-item i {font-size:3rem;color:var(--primary);margin-bottom:1.2rem;transition:var(--transition-bounce);display:inline-block;background:linear-gradient(135deg,rgba(99,102,241,0.1),rgba(139,92,246,0.1));width:90px;height:90px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.2rem}
.highlight-item:hover i {transform:scale(1.15) rotate(360deg);background:var(--gradient);color:white;box-shadow:0 10px 30px rgba(99,102,241,0.4)}
.about-skills-preview {display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}
.skill-circle {width:150px;height:150px;border-radius:50%;background:conic-gradient(var(--primary) 0deg,var(--primary) calc(var(--percent)*3.6deg),#e5e7eb calc(var(--percent)*3.6deg));display:flex;align-items:center;justify-content:center;position:relative;margin:0 auto}
.skill-circle::before {content:'';position:absolute;width:120px;height:120px;background:white;border-radius:50%}
.skill-circle span {position:relative;z-index:1;font-weight:600;text-align:center}

/* Compétences */
.skills-filter,.projects-filter {display:flex;gap:1rem;justify-content:center;margin-bottom:3rem;flex-wrap:wrap}
.filter-btn {padding:0.8rem 1.5rem;border:2px solid var(--primary);border-radius:30px;background:transparent;color:var(--text);cursor:pointer;font-weight:600;transition:var(--transition-bounce);position:relative;overflow:hidden}
.filter-btn::before {content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:var(--gradient);transition:left 0.3s;z-index:-1}
.filter-btn:hover::before {left:0}
.filter-btn:hover {color:white;transform:translateY(-3px) scale(1.05);box-shadow:var(--shadow-lg)}
.filter-btn.active {background:var(--gradient);color:white;box-shadow:var(--glow);transform:scale(1.05)}
.skills-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;padding:1rem}
.skill-card {background:white;padding:1.8rem 1.2rem;border-radius:20px;box-shadow:0 8px 25px rgba(0,0,0,0.08);text-align:center;transition:var(--transition-bounce);position:relative;overflow:hidden;border:2px solid transparent;cursor:pointer}
.skill-card::before {content:'';position:absolute;top:0;left:0;width:100%;height:4px;background:var(--gradient);transform:scaleX(0);transition:transform 0.4s;border-radius:20px 20px 0 0}
.skill-card:hover::before {transform:scaleX(1)}
.skill-card:hover {transform:translateY(-12px) scale(1.08);box-shadow:0 20px 40px rgba(99,102,241,0.25);border-color:var(--primary)}
.skill-card:active {transform:translateY(-8px) scale(1.05)}
.skill-icon {font-size:3rem;color:var(--primary);margin-bottom:1rem}
.skill-badge {display:inline-block;background:var(--gradient);color:white;padding:0.5rem 1.5rem;border-radius:30px;font-size:0.85rem;font-weight:700;margin-top:0.8rem;box-shadow:0 4px 15px rgba(99,102,241,0.3);transition:var(--transition-bounce);text-transform:uppercase;letter-spacing:1px}
.skill-card:hover .skill-badge {transform:scale(1.1);box-shadow:0 6px 20px rgba(99,102,241,0.5)}
.skill-card h3 {font-size:1.1rem;font-weight:700;color:var(--text);margin:0.8rem 0;transition:var(--transition)}
.skill-card:hover h3 {color:var(--primary);transform:scale(1.05)}

/* Projets */
.projects-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:2.5rem;margin-bottom:3rem;padding:1rem}
.project-card {background:white;border-radius:20px;overflow:hidden;box-shadow:0 8px 25px rgba(0,0,0,0.08);transition:var(--transition-bounce);position:relative;border:2px solid transparent;cursor:pointer}
.project-card::after {content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,transparent,rgba(99,102,241,0.05));opacity:0;transition:opacity 0.4s;pointer-events:none}
.project-card:hover::after {opacity:1}
.project-card:hover {transform:translateY(-18px) scale(1.03);box-shadow:0 25px 50px rgba(99,102,241,0.2);border-color:var(--primary)}
.project-card:active {transform:translateY(-12px) scale(1.01)}
.project-image {height:220px;background:var(--gradient);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.project-image::before {content:'';position:absolute;width:100%;height:100%;background:linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.2) 50%, transparent 70%);animation:shimmer 2s infinite}
.project-image i {font-size:4rem;color:white;transition:var(--transition-bounce);filter:drop-shadow(0 0 20px rgba(255,255,255,0.5))}
.project-card:hover .project-image i {transform:scale(1.2) rotate(10deg)}
@keyframes shimmer {0%,100%{transform:translateX(-100%)}50%{transform:translateX(100%)}}
.project-content {padding:2rem}
.project-content h3 {margin-bottom:0.8rem;color:var(--text);font-size:1.3rem;font-weight:700;transition:var(--transition)}
.project-card:hover h3 {color:var(--primary)}
.project-content p {color:var(--text-light);margin-bottom:1rem}
.project-tags {display:flex;flex-wrap:wrap;gap:0.6rem;margin-bottom:1.2rem}
.project-tags span {background:linear-gradient(135deg,rgba(99,102,241,0.1),rgba(139,92,246,0.1));padding:0.4rem 1rem;border-radius:20px;font-size:0.85rem;font-weight:600;color:var(--primary);border:1px solid rgba(99,102,241,0.2);transition:var(--transition-bounce)}
.project-tags span:hover {background:var(--gradient);color:white;transform:translateY(-2px);box-shadow:0 4px 12px rgba(99,102,241,0.3)}
.project-link {color:var(--primary);text-decoration:none;font-weight:700;display:inline-flex;align-items:center;gap:0.6rem;transition:var(--transition-bounce);font-size:1rem;padding:0.6rem 1.2rem;background:rgba(99,102,241,0.05);border-radius:30px;border:2px solid transparent}
.project-link:hover {gap:1rem;background:var(--gradient);color:white;border-color:var(--primary);box-shadow:0 4px 15px rgba(99,102,241,0.3)}

/* Timeline */
.timeline {max-width:800px;margin:0 auto;position:relative}
.timeline::before {content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--border)}
.timeline-item {display:flex;margin-bottom:3rem;position:relative}
.timeline-item:nth-child(odd) {flex-direction:row-reverse}
.timeline-marker {width:20px;height:20px;background:var(--primary);border-radius:50%;position:absolute;left:50%;transform:translateX(-50%);border:4px solid var(--light);z-index:1}
.timeline-content {width:45%;background:white;padding:2rem;border-radius:15px;box-shadow:var(--shadow);transition:var(--transition);position:relative;border-left:4px solid transparent}
.timeline-content:hover {transform:translateY(-10px) scale(1.03);box-shadow:var(--shadow-xl);border-left-color:var(--primary)}
.timeline-content::after {content:'';position:absolute;top:0;right:0;width:0;height:100%;background:linear-gradient(to left, rgba(99,102,241,0.05), transparent);transition:width 0.3s}
.timeline-content:hover::after {width:100%}
.timeline-date {display:inline-block;background:var(--primary);color:white;padding:0.3rem 1rem;border-radius:20px;font-size:0.9rem;margin-bottom:1rem}
.timeline-content h3 {color:var(--primary);margin-bottom:0.5rem}
.timeline-content ul {margin-top:1rem;padding-left:1.5rem}

/* Contact */
.contact-grid {display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.contact-info {display:flex;flex-direction:column;gap:1.5rem}
.contact-item {display:flex;align-items:center;gap:1rem;padding:1.5rem;background:white;border-radius:15px;box-shadow:var(--shadow);transition:var(--transition);position:relative;overflow:hidden}
.contact-item::before {content:'';position:absolute;left:0;top:0;height:100%;width:4px;background:var(--gradient);transform:scaleY(0);transition:transform 0.3s}
.contact-item:hover::before {transform:scaleY(1)}
.contact-item:hover {transform:translateX(15px) scale(1.05);box-shadow:var(--shadow-xl)}
.contact-item i {font-size:2rem;color:var(--primary);transition:var(--transition-bounce)}
.contact-item:hover i {transform:scale(1.2) rotate(15deg);color:var(--accent)}
.social-links {display:flex;gap:1rem;margin-top:1rem}
.social-links a {width:50px;height:50px;background:var(--primary);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;transition:var(--transition-bounce);position:relative;overflow:hidden}
.social-links a::before {content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:rgba(255,255,255,0.3);border-radius:50%;transition:width 0.5s,height 0.5s,top 0.5s,left 0.5s}
.social-links a:hover::before {width:100px;height:100px;top:0;left:0}
.social-links a:hover {transform:translateY(-10px) rotate(360deg) scale(1.2);background:var(--gradient);box-shadow:var(--glow)}
.contact-form {display:flex;flex-direction:column;gap:1rem}
.form-group input,.form-group textarea {width:100%;padding:1rem;border:2px solid var(--border);border-radius:10px;font-family:inherit;font-size:1rem;transition:var(--transition)}
.form-group input:focus,.form-group textarea:focus {outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,102,241,0.1)}

/* Footer */
.footer {background:linear-gradient(135deg,#0f172a 0%,#1e293b 50%,#334155 100%);color:white;padding:4rem 0 1.5rem;position:relative;overflow:hidden}
.footer::before {content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 30% 50%,rgba(99,102,241,0.15) 0%,transparent 60%),radial-gradient(circle at 70% 80%,rgba(236,72,153,0.1) 0%,transparent 60%);pointer-events:none}
.footer::after {content:'';position:absolute;top:0;left:0;width:100%;height:4px;background:var(--gradient)}
.footer-content {display:grid;grid-template-columns:repeat(3,1fr);gap:3rem;margin-bottom:2.5rem;position:relative;z-index:1}
.footer-section h3,.footer-section h4 {margin-bottom:1.5rem;font-size:1.3rem;font-weight:700;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.footer-section ul {list-style:none}
.footer-section li {margin:0.8rem 0;transition:var(--transition)}
.footer-section li:hover {transform:translateX(8px)}
.footer-section a {color:rgba(255,255,255,0.85);text-decoration:none;transition:var(--transition);display:inline-flex;align-items:center;gap:0.5rem;font-size:1rem}
.footer-section a::before {content:'→';opacity:0;transform:translateX(-10px);transition:var(--transition)}
.footer-section a:hover::before {opacity:1;transform:translateX(0)}
.footer-section a:hover {color:white;text-shadow:0 0 10px rgba(99,102,241,0.5)}
.footer-section p {color:rgba(255,255,255,0.7);line-height:1.8;font-size:1rem}
.footer-bottom {text-align:center;padding-top:2.5rem;border-top:2px solid rgba(99,102,241,0.3);position:relative;z-index:1}
.footer-bottom p {font-size:1rem;color:rgba(255,255,255,0.8);font-weight:500}

/* Scroll to top */
.scroll-top {position:fixed;bottom:2rem;right:2rem;width:50px;height:50px;background:var(--gradient);color:white;border:none;border-radius:50%;font-size:1.5rem;cursor:pointer;opacity:0;visibility:hidden;transition:var(--transition-bounce);z-index:999;box-shadow:var(--shadow-lg)}
.scroll-top.visible {opacity:1;visibility:visible;animation:pulse 2s infinite}
.scroll-top:hover {transform:translateY(-10px) scale(1.2) rotate(360deg);box-shadow:var(--glow)}
@keyframes pulse {0%,100%{box-shadow:var(--shadow-lg)}50%{box-shadow:var(--glow)}}

/* Toast */
.toast {position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);background:var(--dark);color:white;padding:1rem 2rem;border-radius:10px;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transition:var(--transition);z-index:9999}
.toast.show {opacity:1;visibility:visible}

/* Animations */
@keyframes fadeIn {from{opacity:0}to{opacity:1}}
@keyframes slideIn {from{transform:translateX(-50px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes zoomIn {from{transform:scale(0.8);opacity:0}to{transform:scale(1);opacity:1}}

/* Responsive */
.skill-icon {font-size:3.5rem;color:var(--primary);margin-bottom:1rem;transition:var(--transition-bounce);display:inline-block;background:linear-gradient(135deg,rgba(99,102,241,0.1),rgba(139,92,246,0.1));width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem}
.skill-card:hover .skill-icon {transform:scale(1.15) rotate(360deg);background:var(--gradient);color:white;box-shadow:0 10px 30px rgba(99,102,241,0.4)}

.hero-badge {display:inline-block;background:rgba(255,255,255,0.2);padding:0.5rem 1.5rem;border-radius:30px;margin-bottom:1rem;font-weight:600;backdrop-filter:blur(10px);animation:float 3s ease-in-out infinite}
@keyframes float {0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

.hero-tags span {background:rgba(255,255,255,0.2);padding:0.5rem 1rem;border-radius:20px;backdrop-filter:blur(10px);display:flex;align-items:center;gap:0.5rem;transition:var(--transition-bounce)}
.hero-tags span:hover {background:rgba(255,255,255,0.3);transform:scale(1.1);box-shadow:0 5px 15px rgba(0,0,0,0.2)}

.stat {text-align:center;transition:var(--transition-bounce)}
.stat:hover {transform:scale(1.1)}
.stat-number {font-size:3rem;font-weight:900;display:block;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent}

.form-group input,.form-group textarea {width:100%;padding:1rem;border:2px solid var(--border);border-radius:10px;font-family:inherit;font-size:1rem;transition:var(--transition);background:white}
.form-group input:focus,.form-group textarea:focus {outline:none;border-color:var(--primary);box-shadow:0 0 0 4px rgba(99,102,241,0.1);transform:translateY(-2px)}

/* Mode sombre amélioré */
[data-theme="dark"] .navbar {background:rgba(15,23,42,0.95)}
[data-theme="dark"] .skill-card,[data-theme="dark"] .project-card,[data-theme="dark"] .highlight-item,[data-theme="dark"] .contact-item,[data-theme="dark"] .timeline-content {background:#1e293b;border:1px solid #334155}
[data-theme="dark"] .lang-dropdown {background:#1e293b;border:1px solid #334155}
[data-theme="dark"] .lang-dropdown button:hover {background:var(--gradient)}
[data-theme="dark"] .stat {background:rgba(30,41,59,0.5);border-color:rgba(99,102,241,0.3)}

/* Animations essentielles uniquement */

/* Vague retirée */

/* Transitions optimisées */

.container {max-width:1400px;margin:0 auto;padding:0 3rem}

@media (max-width:768px) {
    .container {padding:0 1.5rem}
    .skills-grid {grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}
    .projects-grid {grid-template-columns:1fr;gap:2rem}
    .nav-menu {display:none}
    .menu-toggle {display:block}
    .hero-title {font-size:2.5rem}
    .hero-stats {flex-direction:column;gap:1.5rem}
    .about-content,.contact-grid {grid-template-columns:1fr}
    .about-highlights {grid-template-columns:1fr}
    .timeline::before {left:20px}
    .timeline-marker {left:20px}
    .timeline-content {width:calc(100% - 60px);margin-left:60px}
    .timeline-item:nth-child(odd) {flex-direction:row}
    .footer-content {grid-template-columns:1fr}
    .lang-dropdown {right:auto;left:0}
    .about-skills-preview {grid-template-columns:1fr}
    .skill-circle {width:120px;height:120px}
}

/* Utilitaires */
.text-center {text-align:center}
.mt-1 {margin-top:1rem}
.mt-2 {margin-top:2rem}
.mb-1 {margin-bottom:1rem}
.mb-2 {margin-bottom:2rem}

/* Animations supplémentaires */
@keyframes fadeIn {from{opacity:0}to{opacity:1}}
@keyframes slideInLeft {from{opacity:0;transform:translateX(-50px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInRight {from{opacity:0;transform:translateX(50px)}to{opacity:1;transform:translateX(0)}}
@keyframes zoomIn {from{opacity:0;transform:scale(0.5)}to{opacity:1;transform:scale(1)}}
@keyframes bounceIn {0%{opacity:0;transform:scale(0.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(0.9)}100%{transform:scale(1)}}

/* Effets de survol globaux */
a {transition:var(--transition)}
a:hover {opacity:0.8}

button {transition:var(--transition-bounce)}
button:active {transform:scale(0.95)}

/* Scrollbar personnalisée */
::-webkit-scrollbar {width:12px}
::-webkit-scrollbar-track {background:var(--light);border-radius:10px}
::-webkit-scrollbar-thumb {background:var(--gradient);border-radius:10px;border:2px solid var(--light)}
::-webkit-scrollbar-thumb:hover {background:var(--primary);box-shadow:var(--glow)}

/* Brillance simplifiée */
.skill-card,.project-card,.highlight-item,.contact-item,.timeline-content {position:relative;overflow:hidden}

/* Badges */
.hero-badge,.timeline-date {box-shadow:0 5px 15px rgba(99,102,241,0.3)}

/* Amélioration des stats */
.stat {position:relative;padding:1.5rem;background:rgba(255,255,255,0.1);border-radius:15px;backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,0.2)}
.stat::before {content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:var(--gradient);opacity:0;border-radius:15px;transition:opacity 0.3s}
.stat:hover::before {opacity:0.1}

/* Cercles de compétences */
.skill-circle {position:relative}
.skill-circle::after {content:attr(data-percent)'%';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.5rem;font-weight:900;color:var(--primary)}

/* Icônes */
.skill-icon,.project-image i,.highlight-item i {transition:var(--transition)}

/* Amélioration du footer */
.footer {background:linear-gradient(135deg,var(--dark),#1e293b);position:relative;overflow:hidden}
.footer::before {content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 50%,rgba(99,102,241,0.1) 0%,transparent 50%);pointer-events:none}

/* Effet de typing sur les titres */
.section-title {position:relative;display:inline-block;width:100%}
.section-title::before {content:'';position:absolute;left:0;bottom:-5px;width:0;height:3px;background:var(--gradient);animation:typing 2s steps(20) forwards}
@keyframes typing {to{width:100%}}

/* Amélioration des boutons */
.btn {position:relative;z-index:1;box-shadow:0 4px 15px rgba(0,0,0,0.2)}
.btn::after {content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:rgba(255,255,255,0.5);border-radius:50%;transform:translate(-50%,-50%);transition:width 0.6s,height 0.6s;z-index:-1}
.btn:hover::after {width:300px;height:300px}

/* Amélioration des inputs */
.form-group input,.form-group textarea {position:relative;transition:all 0.3s ease}
.form-group input:focus,.form-group textarea:focus {transform:translateY(-3px);box-shadow:0 10px 30px rgba(99,102,241,0.2)}

/* Hover simplifié */

/* Loading states */
.loading {position:relative;pointer-events:none}
.loading::after {content:'';position:absolute;top:50%;left:50%;width:20px;height:20px;border:3px solid var(--primary);border-top-color:transparent;border-radius:50%;animation:spin 0.8s linear infinite}

/* Status Banner */
.status-banner {background:var(--gradient);color:white;padding:2rem;border-radius:20px;margin-bottom:3rem;box-shadow:var(--shadow-xl)}
.status-banner h3 {text-align:center;margin-bottom:1.5rem;font-size:1.5rem}
.status-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}
.status-item {display:flex;align-items:center;gap:0.8rem;background:rgba(255,255,255,0.1);padding:1rem;border-radius:10px;backdrop-filter:blur(10px)}
.status-item i {font-size:1.5rem}

/* Soft Skills */
.soft-skills-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-top:2rem}
.soft-skill-cat {background:white;padding:2rem;border-radius:20px;box-shadow:0 8px 25px rgba(0,0,0,0.08);transition:var(--transition-bounce);border:2px solid transparent;position:relative;overflow:hidden}
.soft-skill-cat::before {content:'';position:absolute;top:0;left:0;width:100%;height:4px;background:var(--gradient);transform:scaleX(0);transition:transform 0.3s}
.soft-skill-cat:hover::before {transform:scaleX(1)}
.soft-skill-cat:hover {transform:translateY(-10px) scale(1.02);box-shadow:0 20px 40px rgba(99,102,241,0.2);border-color:var(--primary)}
.soft-skill-cat h4 {color:var(--primary);margin-bottom:1.2rem;display:flex;align-items:center;gap:0.8rem;font-size:1.3rem;font-weight:700}
.soft-skill-cat h4 i {font-size:1.5rem;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.soft-skill-cat ul {list-style:none;padding:0}
.soft-skill-cat li {padding:0.8rem 0.5rem;border-bottom:1px solid rgba(99,102,241,0.1);color:var(--text);font-size:1rem;transition:var(--transition);position:relative;padding-left:1.5rem}
.soft-skill-cat li::before {content:'✓';position:absolute;left:0;color:var(--primary);font-weight:700}
.soft-skill-cat li:hover {color:var(--primary);transform:translateX(5px);background:rgba(99,102,241,0.05);border-radius:8px}
.soft-skill-cat li:last-child {border-bottom:none}

/* Education Timeline */
.education-timeline {margin-top:2rem}
.edu-item {display:flex;gap:2rem;margin-bottom:2rem;padding:2rem;background:white;border-radius:20px;box-shadow:0 8px 25px rgba(0,0,0,0.08);transition:var(--transition-bounce);border-left:5px solid var(--primary);position:relative;overflow:hidden}
.edu-item::before {content:'';position:absolute;top:0;right:0;width:150px;height:150px;background:radial-gradient(circle,rgba(99,102,241,0.08),transparent);border-radius:50%}
.edu-item:hover {transform:translateX(15px) scale(1.02);box-shadow:0 20px 40px rgba(99,102,241,0.2)}
.edu-date {font-weight:800;color:white;min-width:120px;background:var(--gradient);padding:0.8rem 1.2rem;border-radius:15px;text-align:center;box-shadow:0 4px 15px rgba(99,102,241,0.3);font-size:1rem}
.edu-content h4 {margin-bottom:0.8rem;color:var(--text);font-size:1.3rem;font-weight:700}
.edu-content p {color:var(--text-light);margin:0.5rem 0;font-size:1.05rem;line-height:1.7}
.edu-content .location {font-size:1rem;font-style:italic;color:var(--primary);font-weight:600}
.badge-ongoing {display:inline-block;background:var(--success);color:white;padding:0.5rem 1.2rem;border-radius:25px;font-size:0.9rem;margin-top:0.8rem;font-weight:700;box-shadow:0 4px 15px rgba(16,185,129,0.3)}

/* Certifications */
.cert-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin-top:1.5rem}
.cert-item {background:white;padding:1.2rem;border-radius:10px;box-shadow:var(--shadow);display:flex;align-items:center;gap:1rem;transition:var(--transition)}
.cert-item:hover {transform:translateX(10px);box-shadow:var(--shadow-xl)}
.cert-item i {font-size:1.8rem;color:var(--primary)}

/* Diplômes */
.diplomes-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;padding:1rem}
.diplome-card {background:white;padding:2rem;border-radius:20px;box-shadow:var(--shadow);transition:var(--transition-bounce);border:2px solid transparent;position:relative;overflow:hidden}
.diplome-card::before {content:'';position:absolute;top:0;left:0;width:100%;height:4px;background:var(--gradient);transform:scaleX(0);transition:transform 0.3s}
.diplome-card:hover::before {transform:scaleX(1)}
.diplome-card:hover {transform:translateY(-10px);box-shadow:var(--shadow-xl);border-color:var(--primary)}
.diplome-card.current {border-color:var(--accent)}
.diplome-icon {font-size:3rem;color:var(--primary);margin-bottom:1rem;text-align:center}
.diplome-card h3 {color:var(--text);margin-bottom:0.5rem;text-align:center}
.diplome-school {color:var(--primary);font-weight:600;text-align:center;margin-bottom:0.5rem}
.diplome-desc {color:var(--text-light);text-align:center;margin-bottom:1rem}
.diplome-date {display:block;text-align:center;color:var(--text-light);font-size:0.9rem;margin-top:1rem}
.badge-mention {display:inline-block;background:var(--success);color:white;padding:0.4rem 1rem;border-radius:20px;font-size:0.85rem;margin-top:0.5rem}

/* Pourquoi moi */
.why-me-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-bottom:3rem}
.why-card {background:white;padding:2rem;border-radius:20px;box-shadow:var(--shadow);transition:var(--transition-bounce);border:2px solid transparent;position:relative;overflow:hidden}
.why-card::before {content:'';position:absolute;top:0;left:0;width:100%;height:4px;background:var(--gradient);transform:scaleX(0);transition:transform 0.3s}
.why-card:hover::before {transform:scaleX(1)}
.why-card:hover {transform:translateY(-10px);box-shadow:var(--shadow-xl);border-color:var(--primary)}
.why-card i {font-size:3rem;color:var(--primary);margin-bottom:1rem;display:block}
.why-card h3 {color:var(--text);margin-bottom:1rem}
.why-card p {color:var(--text-light);line-height:1.8}
.why-card.highlight {background:var(--gradient);color:white}
.why-card.highlight h3,.why-card.highlight p,.why-card.highlight i {color:white}
.why-card ul {list-style:none;padding:0}
.why-card li {padding:0.5rem 0;border-bottom:1px solid rgba(255,255,255,0.2)}
.why-card li:last-child {border-bottom:none}
.cta-section {text-align:center;margin-top:3rem;padding:3rem;background:var(--gradient);border-radius:20px;color:white}
.cta-section h3 {margin-bottom:1.5rem;font-size:2rem}

/* Tech Tags */
.tech-tags {display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:1rem}
.tech-tags span {background:var(--gradient);color:white;padding:0.3rem 0.8rem;border-radius:15px;font-size:0.85rem;font-weight:600}

/* Timeline Volunteer */
.timeline-item.volunteer .timeline-marker {background:var(--success)}
.timeline-item.volunteer .timeline-content {border-left-color:var(--success)}

/* Subsection Title */
.subsection-title {font-size:2rem;color:var(--primary);margin-bottom:2rem;padding-bottom:1rem;border-bottom:2px solid var(--border)}

/* Responsive */
@media (max-width:768px) {
    .status-grid {grid-template-columns:1fr}
    .soft-skills-grid {grid-template-columns:1fr}
    .edu-item {flex-direction:column;gap:1rem}
    .edu-date {min-width:auto}
    .diplomes-grid {grid-template-columns:1fr}
    .why-me-grid {grid-template-columns:1fr}
}

/* Sommaire flottant */
.table-of-contents {position:fixed;right:2rem;top:50%;transform:translateY(-50%);z-index:999;max-width:280px}
.toc-toggle {background:var(--gradient);color:white;border:none;padding:0.8rem 1.5rem;border-radius:30px;cursor:pointer;box-shadow:var(--shadow-lg);font-weight:600;display:flex;align-items:center;gap:0.5rem;transition:var(--transition)}
.toc-toggle:hover {transform:scale(1.05);box-shadow:var(--glow)}
.toc-content {background:white;border-radius:15px;box-shadow:var(--shadow-xl);padding:1.5rem;margin-top:1rem;max-height:70vh;overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-10px);transition:var(--transition)}
.table-of-contents:hover .toc-content {opacity:1;visibility:visible;transform:translateY(0)}
.toc-content h3 {color:var(--primary);margin-bottom:1rem;font-size:1.2rem}
.toc-content ul {list-style:none;padding:0}
.toc-content > ul > li {margin:0.8rem 0}
.toc-content ul ul {padding-left:1.5rem;margin-top:0.5rem}
.toc-content ul ul li {margin:0.5rem 0;font-size:0.9rem}
.toc-content a {color:var(--text);text-decoration:none;display:flex;align-items:center;gap:0.5rem;padding:0.5rem;border-radius:8px;transition:var(--transition)}
.toc-content a:hover {background:var(--gradient);color:white;transform:translateX(5px)}
.toc-content a i {font-size:1rem}

/* Responsive amélioré */
@media (max-width:1200px) {
    .table-of-contents {right:1rem;max-width:250px}
}

@media (max-width:992px) {
    .nav-menu {display:none}
    .menu-toggle {display:block}
    .table-of-contents {display:none}
    .hero-title {font-size:3rem;letter-spacing:-2px}
    .hero-stats {gap:1rem}
    .about-content {grid-template-columns:1fr}
    .about-highlights {grid-template-columns:1fr}
    .skills-grid {grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
    .projects-grid {grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
    .contact-grid {grid-template-columns:1fr}
    .footer-content {grid-template-columns:repeat(2,1fr)}
}

@media (max-width:768px) {
    .container {padding:0 1rem}
    .navbar {padding:0.5rem 0}
    .nav-container {padding:0 1rem}
    .hero {padding:1rem}
    .hero-title {font-size:2.5rem;letter-spacing:-1px}
    .hero-subtitle {font-size:1.2rem}
    .hero-tags {flex-direction:column;gap:0.5rem}
    .hero-buttons {flex-direction:column;width:100%}
    .hero-buttons .btn {width:100%;justify-content:center}
    .hero-stats {flex-direction:column;gap:1rem}
    .section {padding:3rem 0}
    .section-title {font-size:2rem}
    .status-grid {grid-template-columns:1fr;gap:0.8rem}
    .status-item {font-size:0.9rem}
    .about-highlights {grid-template-columns:1fr;gap:1rem}
    .soft-skills-grid {grid-template-columns:1fr}
    .education-timeline {margin-top:1rem}
    .edu-item {flex-direction:column;padding:1rem}
    .cert-grid {grid-template-columns:1fr}
    .skills-grid {grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}
    .skills-filter,.projects-filter {flex-wrap:wrap;gap:0.5rem}
    .filter-btn {padding:0.6rem 1rem;font-size:0.9rem}
    .projects-grid {grid-template-columns:1fr;gap:1.5rem}
    .project-tags {gap:0.4rem}
    .project-tags span {font-size:0.75rem;padding:0.3rem 0.7rem}
    .diplomes-grid {grid-template-columns:1fr}
    .why-me-grid {grid-template-columns:1fr}
    .timeline::before {left:20px}
    .timeline-marker {left:20px}
    .timeline-content {width:calc(100% - 60px);margin-left:60px}
    .timeline-item:nth-child(odd) {flex-direction:row}
    .footer-content {grid-template-columns:1fr}
    .version-switcher {gap:0.3rem}
    .version-btn {padding:0.3rem 0.6rem;font-size:0.8rem}
}

@media (max-width:480px) {
    .hero-title {font-size:2rem}
    .hero-subtitle {font-size:1rem}
    .section-title {font-size:1.5rem}
    .highlight-item {padding:1rem}
    .skill-card {padding:1.2rem 0.8rem}
    .project-card {margin-bottom:1rem}
    .diplome-card,.why-card {padding:1.5rem}
    .timeline-content {padding:1rem}
}

/* Fix barre de tâches */
body {padding-bottom:env(safe-area-inset-bottom)}
.footer {padding-bottom:calc(3rem + env(safe-area-inset-bottom))}

/* Scrollbar responsive */
@media (max-width:768px) {
    ::-webkit-scrollbar {width:6px}
}

/* Amélioration typographie */
body {font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:16px;line-height:1.7;letter-spacing:0.01em}

/* Titres améliorés */
h1,h2,h3,h4,h5,h6 {font-weight:800;line-height:1.2;letter-spacing:-0.02em;margin-bottom:1rem}
h1 {font-size:clamp(2.5rem,5vw,5rem)}
h2 {font-size:clamp(2rem,4vw,3rem)}
h3 {font-size:clamp(1.5rem,3vw,2rem)}
h4 {font-size:clamp(1.2rem,2.5vw,1.5rem)}

/* Section titles avec gradient */
.section-title {background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:900;text-shadow:none}

/* Paragraphes améliorés */
p {margin-bottom:1.2rem;color:var(--text);line-height:1.8;font-size:1.05rem}
.lead {font-size:1.3rem;font-weight:600;line-height:1.6;color:var(--primary);margin-bottom:2rem}

/* Listes améliorées */
ul,ol {line-height:1.8;margin-bottom:1.5rem}
li {margin-bottom:0.5rem}

/* Liens améliorés */
a {color:var(--primary);text-decoration:none;transition:var(--transition);font-weight:500}
a:hover {color:var(--accent);text-decoration:underline}

/* Citations */
blockquote {border-left:4px solid var(--primary);padding-left:1.5rem;margin:2rem 0;font-style:italic;color:var(--text-light)}

/* Code */
code {background:rgba(99,102,241,0.1);padding:0.2rem 0.5rem;border-radius:4px;font-family:'Fira Code',monospace;font-size:0.9em}

/* Badges améliorés */
.badge,.skill-badge,.badge-ongoing,.badge-mention {font-weight:700;letter-spacing:0.05em;text-transform:uppercase;font-size:0.85rem}

/* Subsection titles */
.subsection-title {font-size:1.8rem;font-weight:700;color:var(--primary);margin:3rem 0 2rem;padding-bottom:0.8rem;border-bottom:3px solid var(--primary);position:relative}
.subsection-title::after {content:'';position:absolute;bottom:-3px;left:0;width:100px;height:3px;background:var(--accent)}

/* Cards text */
.project-card h3,.skill-card h3,.diplome-card h3,.why-card h3 {font-size:1.3rem;font-weight:700;margin-bottom:0.8rem}
.project-card p,.skill-card p,.diplome-card p,.why-card p {font-size:1rem;line-height:1.7;color:var(--text-light)}

/* Timeline content */
.timeline-content h3 {font-size:1.4rem;font-weight:700;color:var(--primary);margin-bottom:0.5rem}
.timeline-content p {font-size:1rem;color:var(--text);margin-bottom:1rem}
.timeline-content ul li {font-size:0.95rem;line-height:1.6}

/* Status banner */
.status-banner h3 {font-size:1.5rem;font-weight:700;text-align:center;margin-bottom:1.5rem}
.status-item {font-size:1rem;line-height:1.6}

/* Highlight items */
.highlight-item h4 {font-size:1.2rem;font-weight:700;margin-bottom:0.5rem}
.highlight-item p {font-size:0.95rem}

/* Soft skills */
.soft-skill-cat h4 {font-size:1.1rem;font-weight:700;margin-bottom:1rem}
.soft-skill-cat li {font-size:0.95rem}

/* Education */
.edu-content h4 {font-size:1.2rem;font-weight:700;margin-bottom:0.5rem}
.edu-content p {font-size:0.95rem;margin:0.3rem 0}

/* Footer */
.footer h3,.footer h4 {font-weight:700;margin-bottom:1rem}
.footer p,.footer li {font-size:0.95rem;line-height:1.6}

/* Responsive typography */
@media (max-width:768px) {
    body {font-size:15px}
    h1 {font-size:2rem}
    h2 {font-size:1.75rem}
    h3 {font-size:1.4rem}
    h4 {font-size:1.2rem}
    p {font-size:1rem}
    .lead {font-size:1.15rem}
    .section-title {font-size:1.8rem}
    .subsection-title {font-size:1.5rem}
}

/* Barre de recherche dans navbar */
.navbar-search {flex:1;max-width:600px;margin:0 auto}
.search-wrapper-nav {position:relative;background:rgba(99,102,241,0.08);border-radius:50px;padding:0.8rem 1.5rem;display:flex;align-items:center;gap:0.8rem;border:2px solid transparent;transition:var(--transition)}
.search-wrapper-nav:focus-within {background:white;border-color:var(--primary);box-shadow:0 8px 30px rgba(99,102,241,0.3);transform:translateY(-2px)}
.search-wrapper-nav i.fa-search {font-size:1.2rem;color:var(--primary)}
.search-wrapper-nav input {flex:1;border:none;outline:none;font-size:1rem;font-weight:500;color:var(--text);background:transparent}
.search-wrapper-nav input::placeholder {color:var(--text-light)}
.search-kbd {background:var(--gradient);color:white;padding:0.3rem 0.8rem;border-radius:8px;font-size:0.75rem;font-weight:700;font-family:monospace;box-shadow:0 2px 8px rgba(99,102,241,0.3);animation:pulse 2s infinite}

/* Barre de recherche fixe mobile */
.search-bar-fixed {display:none;position:fixed;top:80px;left:0;width:100%;background:rgba(255,255,255,0.98);backdrop-filter:blur(20px);z-index:999;padding:1rem 0;box-shadow:0 4px 20px rgba(0,0,0,0.08);border-bottom:2px solid var(--border);transition:var(--transition)}
.navbar.scrolled ~ .search-bar-fixed {top:65px}
.search-wrapper {position:relative;max-width:100%;background:white;border-radius:50px;padding:1rem 2rem;box-shadow:0 8px 30px rgba(0,0,0,0.1);display:flex;align-items:center;gap:1rem;border:3px solid var(--border);transition:var(--transition)}
.search-wrapper:focus-within {border-color:var(--primary);box-shadow:0 8px 40px rgba(99,102,241,0.3);transform:translateY(-2px)}
.search-wrapper i.fa-search {font-size:1.5rem;color:var(--primary)}
.search-wrapper input {flex:1;border:none;outline:none;font-size:1.2rem;font-weight:500;color:var(--text);font-family:inherit;background:transparent}
.search-wrapper input::placeholder {color:var(--text-light)}
.search-results {position:absolute;top:calc(100% + 1rem);left:0;width:100%;background:white;border-radius:20px;max-height:70vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,0.2);display:none;border:3px solid var(--primary);z-index:1000}
.search-results.show {display:block;animation:slideDown 0.3s}
@keyframes slideDown {from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
.search-result-item {padding:1.2rem 1.5rem;border-bottom:1px solid var(--border);cursor:pointer;transition:var(--transition);display:flex;align-items:center;gap:1rem}
.search-result-item:last-child {border-bottom:none}
.search-result-item:hover {background:linear-gradient(to right,rgba(99,102,241,0.1),transparent);transform:translateX(10px)}
.search-result-icon {width:50px;height:50px;background:var(--gradient);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;box-shadow:0 4px 15px rgba(99,102,241,0.3)}
.search-result-content {flex:1}
.search-result-content h4 {color:var(--text);font-size:1.1rem;margin-bottom:0.3rem;font-weight:700}
.search-result-content p {color:var(--text-light);font-size:0.9rem}
.search-result-category {background:rgba(99,102,241,0.15);color:var(--primary);padding:0.3rem 0.8rem;border-radius:15px;font-size:0.75rem;font-weight:700;text-transform:uppercase}
.no-results {padding:3rem;text-align:center;color:var(--text-light)}
.no-results i {font-size:3rem;margin-bottom:1rem;opacity:0.4;color:var(--primary)}
.search-results::-webkit-scrollbar {width:8px}
.search-results::-webkit-scrollbar-track {background:rgba(99,102,241,0.05)}
.search-results::-webkit-scrollbar-thumb {background:var(--gradient);border-radius:10px}

/* Version Switcher amélioré */
.version-switcher {display:flex;gap:0.6rem}
.version-btn {padding:0.6rem 1.4rem;border:2px solid transparent;border-radius:30px;background:rgba(99,102,241,0.12);color:var(--primary);text-decoration:none;font-weight:700;font-size:0.95rem;transition:var(--transition-bounce);position:relative;overflow:hidden}
.version-btn::before {content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:var(--gradient);transition:left 0.3s;z-index:-1}
.version-btn:hover::before {left:0}
.version-btn:hover {color:white;transform:translateY(-4px);box-shadow:0 6px 20px rgba(99,102,241,0.4)}
.version-btn.active {background:var(--gradient);color:white;box-shadow:0 5px 20px rgba(99,102,241,0.5);transform:scale(1.08)}

/* Scrollbar améliorée */
::-webkit-scrollbar {width:14px}
::-webkit-scrollbar-track {background:linear-gradient(to bottom,#f8fafc,#e2e8f0);border-radius:10px}
::-webkit-scrollbar-thumb {background:var(--gradient);border-radius:10px;border:3px solid var(--light);box-shadow:0 2px 10px rgba(99,102,241,0.3)}
::-webkit-scrollbar-thumb:hover {background:linear-gradient(135deg,var(--accent),var(--primary));box-shadow:0 4px 20px rgba(99,102,241,0.5)}

@media (max-width:992px) {
    .nav-container {grid-template-columns:auto auto;gap:1rem}
    .navbar-search {display:none}
    .search-bar-fixed {display:block}
    .search-bar-fixed {top:70px;padding:0.8rem 0}
    .navbar.scrolled ~ .search-bar-fixed {top:60px}
    .search-wrapper {padding:0.8rem 1.5rem;border-radius:30px}
    .search-wrapper input {font-size:1rem}
    .search-wrapper i.fa-search {font-size:1.2rem}
    .search-result-item {padding:1rem;flex-wrap:wrap}
    .search-result-icon {width:40px;height:40px;font-size:1rem}
    .search-result-category {margin-top:0.5rem;width:100%}
}