/* ============================================================
   SECTION : UTILITAIRES GÉNÉRAUX (Couleurs & Fond)
   ============================================================ */
.bg-muted\/30 { background-color: #f9fafb; }
.text-accent { color: #f97316; }
.text-primary { color: #3b82f6; }
.text-secondary { color: #8b5cf6; }
.text-muted-foreground { color: #6b7280; }
.bg-card { background-color: #ffffff; }
.border-border\/50 { border-color: rgba(229, 231, 235, 0.5); }


/* ============================================================
   SECTION : SOLUTION NACEF CERTIFIÉE (Hero Slider)
   ============================================================ */
.slide { 
    opacity: 0; 
    transition: opacity 1000ms ease-in-out; 
}
.slide.is-active { 
    opacity: 1; 
    z-index: 10; 
}


/* ============================================================
   SECTION : FONCTIONNALITÉS - PLATEFORME COMPLÈTE
   ============================================================ */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(70px);
    transition: opacity 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Effet cascade entre les cartes de fonctionnalités */
.features-grid > div:nth-child(1) .animate-on-scroll { transition-delay: 0.15s; }
.features-grid > div:nth-child(2) .animate-on-scroll { transition-delay: 0.30s; }
.features-grid > div:nth-child(3) .animate-on-scroll { transition-delay: 0.45s; }
.features-grid > div:nth-child(4) .animate-on-scroll { transition-delay: 0.60s; }
.features-grid > div:nth-child(5) .animate-on-scroll { transition-delay: 0.75s; }
.features-grid > div:nth-child(6) .animate-on-scroll { transition-delay: 0.90s; }

.card-hover {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}


/* ============================================================
   SECTION : VENDRE DE MANIÈRE PROFESSIONNELLE (CTA)
   ============================================================ */
.cta-button {
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.cta-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.35) 0%, transparent 65%);
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 1s ease, transform 1s ease;
}

.cta-button.active::before {
    opacity: 1;
    transform: scale(1.4);
}

@keyframes scrollGlowBounce {
    0%, 100% {
        transform: translateY(0);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 0 30px rgba(255, 255, 255, 0.2);
    }
    50% {
        transform: translateY(-12px);
        box-shadow: 0 35px 45px -10px rgba(0, 0, 0, 0.15), 0 0 50px rgba(255, 255, 255, 0.4);
    }
}

.cta-button.active {
    animation: scrollGlowBounce 3s infinite ease-in-out;
}

.cta-button .arrow {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.cta-button:hover .arrow {
    transform: translateX(10px);
}


/* ============================================================
   SECTION : MODULES KESSA CONNECT (Détaillées)
   ============================================================ */

.feature-section-wrapper {
    width: 100% !important;
    background-color: #FCFCFD !important; /* Votre couleur exacte */
    background-image: none !important;    /* Supprime tout dégradé résiduel */
    position: relative;
}
.feature-block {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

.feature-block.visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes subtlePulse {
    0%, 100% {
        transform: translateY(0);
        box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    }
    50% {
        transform: translateY(-6px);
        box-shadow: 0 20px 25px -5px rgba(0,0,0,0.2);
    }
}

.feature-btn.active {
    animation: subtlePulse 2.8s infinite ease-in-out;
}


/* ============================================================
   SECTION : CONFORMITÉ & SÉCURITÉ / POURQUOI ARABSOFT
   ============================================================ */
.animate-on-scroll-header {
    opacity: 0;
    transform: translateY(70px);
    transition: opacity 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-on-scroll-header.visible {
    opacity: 1;
    transform: translateY(0);
}


/* ============================================================
   SECTION : TÉMOIGNAGES (Slider Horizontal)
   ============================================================ */
#horizontal-slider {
    display: flex;
    width: 100%;
}

#cards-wrapper {
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
#cards-wrapper::-webkit-scrollbar {
    display: none;
}


/* ============================================================
   SECTION : PARTENARIATS (Logos défilants)
   ============================================================ */

.logos-container {
    overflow: hidden;
    padding: 40px 0; /* Espacement vertical interne */
    position: relative;
    white-space: nowrap; /* Indispensable pour garder les logos sur une ligne */
    background: transparent;
}

/* Effet de fondu sur les côtés (Gradient) */
.logos-container::before, 
.logos-container::after {
    content: "";
    position: absolute;
    top: 0;
    width: 150px;
    height: 100%;
    z-index: 2;
    pointer-events: none; /* Permet de cliquer à travers le dégradé */
}

/* Utilisation de couleurs fixes si hsl(--background) ne fonctionne pas */
.logos-container::before { 
    left: 0; 
    background: linear-gradient(to right, #ffffff, transparent); 
}
.logos-container::after { 
    right: 0; 
    background: linear-gradient(to left, #ffffff, transparent); 
}

.logos-slide {
    display: inline-flex;
    align-items: center;
    animation: 25s slide infinite linear; /* Vitesse fluide */
}

.logos-slide:hover {
    animation-play-state: paused; /* S'arrête au survol pour plus de confort */
}

.partner-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 50px; /* Espace horizontal entre chaque logo */
    height: 100px;
}

.partner-item img {
    height: 60px; /* Taille uniforme des logos */
    width: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.4s ease;
}

.partner-item img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1); /* Petit effet de zoom au survol */
}

@keyframes slide {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Animation du texte de titre */
.reveal-text > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal-text.visible > * {
    opacity: 1;
    transform: translateY(0);
}


/* ============================================================
   SECTION : QUESTIONS FRÉQUENTES (FAQ)
   ============================================================ */
.faq-item {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item.reveal {
    opacity: 1;
    transform: translateY(0);
}

.space-y-4:has(button[data-state="open"]) .border-b:not(:has(button[data-state="open"])) {
    opacity: 0.6;
    filter: blur(0.5px);
}

[data-state=open] .lucide-chevron-down {
    transform: rotate(180deg);
    color: #f97316;
}



/* ============================================================
   SECTION : PRÊT À MODERNISER (Footer CTA) 
   ============================================================ */

/* --- Animation 1 : Le Pulse (Onde extérieure bleue) --- */
@keyframes pulse-animation {
    0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);  }
    70% { box-shadow: 0 0 0 15px rgba(59, 130, 246, 0); }
    100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

.btn-pulse {
    animation: pulse-animation 2s infinite;
    transition: transform 0.3s ease;
}

/* --- Animation 2 : Le Shine (Reflet intérieur blanc) --- */
.shine-effect {
    position: relative;
    overflow: hidden; /* Empêche le reflet de déborder */
    display: inline-flex; /* Assure un bon centrage du contenu */
    align-items: center;
    justify-content: center;
}

.shine-effect::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -60%;
    width: 25%;
    height: 200%;
    background: rgba(255, 255, 255, 0.4); 
    transform: rotate(30deg);
    pointer-events: none; 
    animation: shine 3s infinite;
}

@keyframes shine {
    0% { left: -60%; }
    20% { left: 120%; } 
    100% { left: 120%; } 
}

.shine-effect:hover::after,
.btn-pulse:hover {
    animation-play-state: paused;
    transform: translateY(-2px); 
}