/* =============================================
   Theme: Hero Section - Subtle Design Details
   ============================================= */

/* --- 1. Subtle Grid Background --- */
.hero-split {
    position: relative; /* Nécessaire pour les pseudo-éléments */
    background-color: #f8f9fa;
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* --- 2. Shine Animation on Badge --- */
.hero-badge-wrapper .hero-badge {
    position: relative;
    overflow: hidden; /* Pour contenir l'effet de brillance */
}

.hero-badge-wrapper .hero-badge::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    animation: shine 6s infinite linear;
}

@keyframes shine {
    0% {
        left: -150%;
    }
    50% {
        left: 150%;
    }
    100% {
        left: 150%;
    }
}

/* --- 3. Fading Gradient Border --- */
.hero-split::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 1200px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
}