body {
            background: linear-gradient(135deg, #f8f5ff 0%, #e8e2ff 100%);
        }
        .section-bg {
            background: linear-gradient(135deg, #f8f5ff 0%, #ede8ff 100%);
        }
        .section-accent {
            background: linear-gradient(135deg, #6f42c1 0%, #5a2d91 100%);
            color: #fff;
        }
        .section-secondary {
            background: linear-gradient(135deg, #4338ca 0%, #3730a3 100%);
            color: #fff;
        }
        .section-tertiary {
            background: linear-gradient(135deg, #c2185b 0%, #ad1457 100%);
            color: #fff;
        }
        .card {
            border-radius: 1rem;
            box-shadow: 0 2px 16px rgba(111,66,193,0.08);
        }
        .nav-link.active, .nav-link:focus, .nav-link:hover {
            color: #6f42c1 !important;
        }
        .btn-accent {
            background: linear-gradient(90deg, #6f42c1 0%, #5a2d91 100%);
            color: #fff;
            border: none;
        }
        .btn-accent:hover {
            background: linear-gradient(90deg, #5a2d91 0%, #4c1d82 100%);
            color: #fff;
        }
        .btn-secondary-custom {
            background: linear-gradient(90deg, #4338ca 0%, #3730a3 100%);
            color: #fff;
            border: none;
        }
        .btn-secondary-custom:hover {
            background: linear-gradient(90deg, #3730a3 0%, #312e81 100%);
            color: #fff;
        }
        .btn-success-custom {
            background: linear-gradient(90deg, #c2185b 0%, #ad1457 100%);
            color: #fff;
            border: none;
        }
        .btn-success-custom:hover {
            background: linear-gradient(90deg, #ad1457 0%, #880e4f 100%);
            color: #fff;
        }
        footer {
            background: linear-gradient(90deg, #6f42c1 0%, #5a2d91 100%);
            color: #fff;
        }
        footer a {
            color: #e8d5ff;
        }
        footer a:hover {
            color: #fff;
        }
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s, transform 0.8s;
        }
        .fade-in.visible {
            opacity: 1;
            transform: none;
        }

        .hover-shadow:hover {
            box-shadow: 0 4px 24px rgba(111,66,193,0.15);
            transition: box-shadow 0.3s;
        }

        .hexagon {
            position: relative;
            width: 100px;
            height: 55px;
            background-color: #f8f9fa;
            margin: 27.5px 0;
            display: inline-block;
            transition: transform 0.3s;
        }
        .hexagon:before {
            content: "";
            position: absolute;
            top: -27.5px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 27.5px solid #f8f9fa;
        }
        .hexagon:after {
            content: "";
            position: absolute;
            bottom: -27.5px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-top: 27.5px solid #f8f9fa;
        }
        .hexagon:hover {
            transform: scale(1.1);
        }

        /* Remplacez le CSS existant dans votre <style> par ceci : */
        .section-title-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 1.5rem;
        }

        .section-title-text {
            margin: 0 !important;
        }

        .section-title-icon {
            margin-right: 0.5rem;
            flex-shrink: 0;
        }

        /* Animations et effets améliorés */
        .card-hover {
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .card-hover:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 30px rgba(111,66,193,0.2);
        }

        .skill-badge {
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .skill-badge:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(111,66,193,0.3);
        }

        .floating-shapes {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: -1;
        }

        .floating-shape {
            position: absolute;
            border-radius: 50%;
            background: linear-gradient(135deg, rgba(111,66,193,0.1), rgba(139,92,246,0.1));
            animation: float 6s ease-in-out infinite;
        }

        .floating-shape:nth-child(1) {
            width: 80px;
            height: 80px;
            top: 20%;
            left: 10%;
            animation-delay: 0s;
        }

        .floating-shape:nth-child(2) {
            width: 120px;
            height: 120px;
            top: 60%;
            right: 10%;
            animation-delay: 2s;
        }

        .floating-shape:nth-child(3) {
            width: 60px;
            height: 60px;
            top: 80%;
            left: 20%;
            animation-delay: 4s;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(180deg); }
        }

        .pulse-icon {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }

        .gradient-text {
            background: linear-gradient(135deg, #6f42c1, #8b5cf6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .gradient-text-secondary {
            background: linear-gradient(135deg, #4338ca, #6366f1);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .gradient-text-success {
            background: linear-gradient(135deg, #c2185b, #e91e63);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .nav-modern {
            backdrop-filter: blur(10px);
            background: rgba(255,255,255,0.95);
        }

        .typing-animation {
            overflow: hidden;
            border-right: 3px solid #6f42c1;
            white-space: nowrap;
            animation: typing 3s steps(20, end), blink-caret 0.75s step-end infinite;
        }

        @keyframes typing {
            from { width: 0 }
            to { width: 100% }
        }

        @keyframes blink-caret {
            from, to { border-color: transparent }
            50% { border-color: #6f42c1 }
        }