/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Nov 11 2025 | 14:36:33 */
bl.page-wrapper {
    background-color: #131319!important;
}

.menu-bar-wrapper, .menu-bar-wrapper.is-sticky {
    background-color: #13141e!important;
}

h1 {
  font-family: "Belanosima", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.highlightgreen {
    background: #50C878;
    color: #fff;
    padding: 5px 15px;
    display: inline-block;
    transform: skew(-5deg);
}

.highlightred {
    background: #FF4444;
    color: #fff;
    padding: 5px 15px;
    display: inline-block;
    transform: skew(-5deg);
}





h2 {
  font-family: "Belanosima", sans-serif;
  font-weight: 600;
  font-style: normal;
}

h3 {
  font-family: "Belanosima", sans-serif;
  font-weight: 700;
  font-style: normal;
}

h4 { color:#fff;  }


.noserv  { visibility:hidden;  }

.elementor-1225 .elementor-element.elementor-element-9276499  { line-height:1.8; color:#fff;   }

.wbc-recent-post-widget  {  display:none!important;   }

.bottom-fixed-menu   { bottom:initial!important;   }

.elementor-20793 .elementor-element.elementor-element-b5145fe  {  --z-index:none!important; }

        /* Formes animées en arrière-plan qui réagissent au scroll */
        .bg-shapes {
		position: fixed;
    	top: 27vh;
    	left: 0;
    	width: 100%;
    	/* height: 100%; */
    	z-index: 0;
       
        }

        /* Caméléon vintage en background */
        .chameleon-bg {
            position: absolute;
            top: -50px;
            right: 10%;
            width: 500px;
            height: 500px;
            opacity: 0.15;
            filter: hue-rotate(0deg);
            animation: colorShift 15s infinite ease-in-out;
            z-index: 1;
        }

        @keyframes colorShift {
            0%, 100% {
                filter: hue-rotate(0deg) saturate(1.5);
            }
            25% {
                filter: hue-rotate(90deg) saturate(1.8);
            }
            50% {
                filter: hue-rotate(180deg) saturate(2);
            }
            75% {
                filter: hue-rotate(270deg) saturate(1.8);
            }
        }

        /* Effet vintage sur le caméléon */
        .chameleon-bg::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: repeating-linear-gradient(
                0deg,
                transparent,
                transparent 2px,
                rgba(255, 255, 255, 0.03) 2px,
                rgba(255, 255, 255, 0.03) 4px
            );
            pointer-events: none;
        }

        .shape {
            position: absolute;
            opacity: 0.5;
            transition: all 0.3s ease-out;
        }

        .shape-1 {
            width: 400px;
            height: 400px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 50%;
            top: 10%;
			left:5%;
      
		
        }

        .shape-2 {
            width: 300px;
            height: 300px;
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
            top: 60%;
            right: 10%;
        }


        .shape-4 {
            width: 350px;
            height: 350px;
            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
            border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
            top: 40%;
            right: 30%;

        }

        /* Navigation */
        .inside-header {
            position: fixed;
            top: 0;
            width: 100%;
            padding: 20px 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 1000;
            background: rgba(10, 10, 10, 0.8);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s;
        }

        nav.scrolled {
            padding: 15px 50px;
            background: rgba(10, 10, 10, 0.95);
        }

        .logo {
            font-size: 24px;
            font-weight: bold;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            cursor: pointer;
            transition: all 0.3s;
        }

        .logo:hover {
            transform: scale(1.05);
        }

        .nav-links {
            display: flex;
            gap: 30px;
            list-style: none;
        }

        .nav-links a {
            color: #fff;
            text-decoration: none;
            position: relative;
            transition: all 0.3s;
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            transition: width 0.3s;
        }

        .nav-links a:hover::after {
            width: 100%;
        }

        /* Hero Section avec forme découpée */
        .hero {
            position: relative;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 100px 50px;
            z-index: 1;
            clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        }

        .hero-content {
            text-align: center;
            max-width: 800px;
        }

        .hero-title {
            font-size: 72px;
            font-weight: 900;
            margin-bottom: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: slideInDown 1s ease-out;
        }

        .hero-subtitle {
            font-size: 32px;
            margin-bottom: 30px;
            opacity: 0;
            animation: fadeIn 1s ease-out 0.3s forwards;
        }

        .hero-description {
            font-size: 18px;
            line-height: 1.6;
            opacity: 0;
            animation: fadeIn 1s ease-out 0.6s forwards;
            margin-bottom: 40px;
        }

        .cta-button {
            display: inline-block;
            padding: 15px 40px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #fff;
            text-decoration: none;
            border-radius: 50px;
            font-weight: bold;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
            opacity: 0;
            animation: fadeIn 1s ease-out 0.9s forwards;
        }

        .cta-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.2);
            transition: left 0.5s;
        }

        .cta-button:hover::before {
            left: 100%;
        }

        .cta-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
        }

        @keyframes slideInDown {
            from {
                transform: translateY(-50px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        @keyframes fadeIn {
            to {
                opacity: 1;
            }
        }

        /* About Section avec forme diagonale */
        .about {
            position: relative;
            padding: 150px 50px 100px;
            z-index: 1;
            background: rgba(20, 20, 20, 0.5);
            backdrop-filter: blur(10px);
            clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
            margin-top: -100px;
        }

        .section-title {
            font-size: 48px;
            text-align: center;
            margin-bottom: 60px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease-out;
        }

        .section-title.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .about-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            max-width: 1200px;
            margin: 0 auto;
            align-items: center;
        }

        .about-text {
            line-height: 1.8;
            opacity: 0;
            transform: translateX(-50px);
            transition: all 0.8s ease-out;
        }

        .about-text.visible {
            opacity: 1;
            transform: translateX(0);
        }

        .about-text h3 {
            font-size: 28px;
            margin-bottom: 20px;
            color: #e0b004;
        }

        .about-text p {
            margin-bottom: 15px;
            opacity: 0.9;
        }

        .profile-visual {
            position: relative;
            width: 100%;
            height: 400px;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transform: translateX(50px);
            transition: all 0.8s ease-out;
        }

		.elementor-20793   { transform: translateX(0)!important;  }

        .profile-visual.visible {
            opacity: 1;
            transform: translateX(0);
        }

        .profile-shape {
            position: absolute;
            width: 300px;
            height: 300px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 50% 50% 0 50%;
            animation: morphing 8s infinite ease-in-out;
        }

        @keyframes morphing {
            0%, 100% {
                border-radius: 50% 50% 0 50%;
                transform: rotate(0deg);
            }
            25% {
                border-radius: 0 50% 50% 50%;
                transform: rotate(90deg);
            }
            50% {
                border-radius: 50% 0 50% 50%;
                transform: rotate(180deg);
            }
            75% {
                border-radius: 50% 50% 50% 0;
                transform: rotate(270deg);
            }
        }

        /* Services Section avec forme en vague */
        .services {
            position: relative;
            padding: 150px 50px 100px;
            z-index: 1;
            clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%);
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
            margin-top: -80px;
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 40px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .service-card {
            background: rgba(30, 30, 30, 0.5);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 40px;
			margin-left:20px;
			margin-right:20px;
            position: relative;
            overflow: hidden;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
            opacity: 0;
            transform: translateY(50px) scale(0.9);
        }

@media only all and (max-width:799px)   {  .service-card     {  margin-bottom:25px;     }      }

        .service-card.visible {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        .service-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(135deg, transparent, rgba(102, 126, 234, 0.1), transparent);
            transform: rotate(45deg);
            transition: all 0.6s;
        }

        .service-card:hover::before {
            left: 100%;
        }

        .service-card:hover {
            transform: translateY(-10px) scale(1.05);
            border-color: #667eea;
            box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3);
        }

        .service-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
            margin-bottom: 20px;
            transition: all 0.5s;
        }

        .service-card:hover .service-icon {
            transform: rotate(360deg) scale(1.1);
        }

        .service-card h3 {
            font-size: 24px;
            margin-bottom: 15px;
            color: #667eea;
        }

        .service-card p {
            opacity: 0.8;
            line-height: 1.6;
			text-align:left;
        }

        /* Contact Section avec forme hexagonale */
        .contact {
            position: relative;
            padding: 150px 50px 100px;
            z-index: 1;
            background: rgba(20, 20, 20, 0.5);
            backdrop-filter: blur(10px);
            clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
            margin-top: -80px;
        }

        .contact-content {
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
        }

        .contact-info {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }

        .contact-item {
            background: rgba(30, 30, 30, 0.5);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
            padding: 40px 30px;
            transition: all 0.5s;
            opacity: 0;
            transform: scale(0.8) rotate(45deg);
        }

        .contact-item.visible {
            opacity: 1;
            transform: scale(1) rotate(0deg);
        }

        .contact-item:hover {
            transform: scale(1.1) rotate(5deg);
            border-color: #667eea;
            box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3);
        }

        .contact-item-icon {
            font-size: 32px;
            margin-bottom: 15px;
        }

        .contact-item h4 {
            font-size: 18px;
            margin-bottom: 10px;
            color: #667eea;
        }

        .contact-item a {
            color: #fff;
            text-decoration: none;
            opacity: 0.8;
            transition: opacity 0.3s;
        }

        .contact-item a:hover {
            opacity: 1;
        }

        /* Curseur personnalisé */
        .interactive-shapes {
            position: fixed;
            width: 50px;
            height: 50px;
            pointer-events: none;
            z-index: 9999;
            transition: all 0.1s ease-out;
        }

        .cursor-shape {
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 50%;
            opacity: 0.3;
            transform: translate(-50%, -50%);
        }

        /* Indicateur de scroll */
        .scroll-indicator {
            position: fixed;
            top: 0;
            left: 0;
            height: 4px;
            background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
            z-index: 9999;
            transition: width 0.1s;
        }

        /* Section dividers animés */
        .section-divider {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100px;
            overflow: hidden;
        }

        .wave {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 200%;
            height: 100%;
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
            animation: wave 10s linear infinite;
        }

        @keyframes wave {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-50%);
            }
        }

        /* Responsive */
        @media (max-width: 768px) {
            .hero-title {
                font-size: 42px;
            }

            .hero-subtitle {
                font-size: 24px;
            }

            .about-content {
                grid-template-columns: 1fr;
            }

            nav {
                padding: 20px 20px;
            }

            .nav-links {
                gap: 15px;
                font-size: 14px;
            }

            .section-title {
                font-size: 36px;
            }

            .hero {
                clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
            }

            .about {
                clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 100%);
            }

            .services {
                clip-path: polygon(0 0, 100% 5%, 100% 95%, 0 100%);
            }

            .contact {
                clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 100%);
            }
        }