/* Optimisation Menu Coulissant */
        #mobile-menu {
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            transform: translateX(100%);
        }
        #mobile-menu.active {
            transform: translateX(0);
        }
        /* Effet de flou sur le fond quand ouvert */
        #menu-overlay {
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }
        #menu-overlay.active {
            opacity: 1;
            pointer-events: auto;
        }
        @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(30px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }
    .animate-fadeInUp { animation: fadeInUp 0.8s ease-out forwards; }
    .animate-float { animation: float 3s ease-in-out infinite; }
    .hero-gradient {
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
                    url('hero.jpg'); /* Image de remplacement haute qualité pour le technicien */
        background-size: cover;
        background-position: center;
    }
    .glass-card {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    .hero-gradient {
    /* 1. Image Fixe (Effet Parallaxe Pro) */
    background-attachment: fixed;
    
    /* 2. Image Claire : On réduit l'overlay à seulement 10% d'opacité */
    /* Cela protège juste assez le texte blanc sans assombrir l'image */
    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), 
                      url('hero.jpg');
    
    /* 3. Ajustements de positionnement */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    /* 4. Booster la luminosité si nécessaire */
    filter: brightness(1.02);
}

/* 5. Astuce "Sublime" : Ombre portée sur le texte */
/* Comme l'image est très claire, on ajoute une ombre douce pour que le texte 'pop' */
.hero-gradient h1, 
.hero-gradient p {
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}
.font-montserrat { font-family: 'Montserrat', sans-serif; }
    
    /* Animation de flottement pour la carte d'avis */
    @keyframes floating {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-10px); }
    }
    .animate-float {
        animation: floating 3s ease-in-out infinite;
    }

    /* Effet de brillance au survol du bouton */
    .btn-glow:hover {
        box-shadow: 0 10px 20px -5px rgba(37, 99, 235, 0.4);
    }

    /* Transition douce pour l'image */
    .img-zoom {
        transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .img-zoom:hover {
        transform: scale(1.03);
    }
      .animate-on-scroll {
        opacity: 0;
        transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .slide-in-right { transform: translateX(50px); }
    .slide-in-left { transform: translateX(-50px); }
    
    .animate-on-scroll.appear {
        opacity: 1;
        transform: translateX(0);
    }
    /* --- Styles Section Services PAC --- */
.services-pac {
    font-family: 'Montserrat', sans-serif;
    color: #334155;
}

.services-pac h2 { color: #0f172a; }

.services-pac .img-container img {
    border-radius: 1.5rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Bloc Attention Bleu */
.alert-blue {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.alert-blue-title {
    color: #1e40af;
    font-weight: 700;
    font-size: 0.875rem;
}

/* Bloc Urgence Rouge */
.alert-red {
    background-color: #fff1f2;
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.alert-red-title {
    color: #991b1b;
    font-weight: 700;
    font-size: 0.875rem;
}

.service-list li {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.service-list i {
    color: #2563eb;
    margin-right: 0.75rem;
    font-size: 1.1rem;
}

.btn-blue {
    background-color: #2563eb;
    transition: all 0.3s ease;
}

.btn-blue:hover {
    background-color: #1d4ed8;
    transform: translateY(-2px);
}

.btn-red {
    background-color: #dc2626;
    transition: all 0.3s ease;
}

.btn-red:hover {
    background-color: #b91c1c;
    transform: translateY(-2px);
}
    

.group:hover p.text-slate-800 {
    color: #2563eb; /* Passage au bleu au survol */
    transition: color 0.3s ease;
}

/* Ombre fluide sur les cartes blanches */
.shadow-sm {
    box-shadow: 0 10px 40px -15px rgba(0, 0, 0, 0.05);
}
/* À ajouter à votre fichier CSS principal */
.shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 150, 97, 0.1), 0 10px 10px -5px rgba(0, 150, 97, 0.04);
}

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

/* Animation douce pour les badges */
@keyframes pulse-soft {
    0%, 100% { transform: translate(-50%, 0) scale(1); }
    50% { transform: translate(-50%, -2px) scale(1.02); }
}

.absolute.-top-5 {
    animation: pulse-soft 3s ease-in-out infinite;
}