:root {
    --purple: #6f42c1;
    --green: #28a745;
    --dark: #1a1a1a;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--dark);
    line-height: 1.6;
}

/* HOME */
 /* TYPOGRAPHIE ET COULEURS */
    .text-gradient-purple {
        background: linear-gradient(45deg, #6f42c1, #a166ff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    
    .bg-purple { background-color: #6f42c1; }
    .bg-green-soft { background-color: rgba(40, 167, 69, 0.1); }
    .text-green { color: #28a745; }

    /* DESIGN DES COMPOSANTS */
    .rounded-custom { border-radius: 2rem; }
    
    .btn-white-glass {
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(10px);
        border-radius: 12px;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .hover-up:hover {
        transform: translateY(-5px);
        box-shadow: 0 1rem 3rem rgba(111, 66, 193, 0.25) !important;
    }

    /* ANIMATIONS */
    @keyframes float {
        0% { transform: translateY(0px); }
        50% { transform: translateY(-15px); }
        100% { transform: translateY(0px); }
    }
    .animate-float { animation: float 4s ease-in-out infinite; }
    .animate-float-delayed { animation: float 4s ease-in-out infinite; animation-delay: 2s; }

    .shadow-2xl {
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    }
/* //////////////////// */

.text-purple { color: var(--purple); }
.text-green { color: var(--green); }

/* Bouton Premium */
.btn-purple-gradient {
    background: linear-gradient(45deg, var(--purple), #8e44ad);
    color: white;
    border: none;
    padding: 12px 28px;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.btn-purple-gradient:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(111, 66, 193, 0.2);
    color: white;
}

/* Sections */
.section-padding { padding: 100px 0; }

.card-service {
    border: none;
    border-radius: 20px;
    transition: all 0.4s ease;
    background: #fff;
    border: 1px solid #f0f0f0;
}

.card-service:hover {
    border-color: var(--green);
    transform: translateY(-10px);
}



/* CEQUI FAIT NOTRE DIFFERENCE */
.card-difference {
        border-radius: 20px;
        transition: transform 0.3s ease;
    }
    .card-difference:hover {
        transform: translateY(-5px);
    }
    .icon-circle {
        width: 60px;
        height: 60px;
        background: rgba(111, 66, 193, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 15px;
        font-size: 1.8rem;
    }
    .bg-badge {
        position: absolute;
        top: 10px;
        right: -30px;
        background: #28a745;
        color: white;
        padding: 5px 40px;
        transform: rotate(45deg);
        font-size: 0.7rem;
        font-weight: bold;
    }
    .bg-purple {
        background: linear-gradient(135deg, #6f42c1 0%, #4b2d86 100%) !important;
    }



    /* SERVICE */

     /* Animation pour les cartes */
    .card-service {
        transition: all 0.3s ease-in-out;
    }
    .card-service:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 30px rgba(111, 66, 193, 0.1) !important;
    }
    
    /* Couleurs personnalisées */
    .border-purple { border-color: #6f42c1 !important; }
    .border-green { border-color: #28a745 !important; }
    .text-purple { color: #6f42c1; }
    .text-green { color: #28a745; }
    
    .transition-hover:hover {
        filter: brightness(1.05);
    }


/* FOOTER */
 /* Styles spécifiques au Footer */
    .footer-premium {
        background-color: #0f1113 !important; /* Un noir plus profond */
        border-top: 4px solid #6f42c1;
    }

    .footer-links a:hover {
        color: #28a745 !important;
        padding-left: 5px;
    }

    .transition {
        transition: all 0.3s ease;
    }

    .custom-newsletter input {
        border-radius: 8px 0 0 8px !important;
        font-size: 0.9rem;
    }

    .custom-newsletter button {
        border-radius: 0 8px 8px 0 !important;
        padding: 10px 20px;
    }

    .text-purple { color: #6f42c1; }
    .text-green { color: #28a745; }
    .bg-purple { background-color: #6f42c1; }
    .btn-purple { background-color: #6f42c1; color: white; border: none; }
    .btn-purple:hover { background-color: #5a32a3; color: white; }

    .social-icons a:hover {
        background-color: #6f42c1 !important;
        transform: translateY(-3px);
    }