/* ==========================================
   AMÉLIORATIONS HERO - RESPONSIVE
   ========================================== */

/* Mobile - 768px et moins */
@media (max-width: 768px) {
    .hero-badge {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.75rem 1.25rem;
        font-size: 12px;
        margin-bottom: 1.5rem;
        border-radius: 12px;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }
    
    .badge-separator {
        display: none;
    }
    
    .badge-item {
        font-size: 12px;
    }
    
    .badge-item i {
        font-size: 14px;
    }
    
    /* Stats avec icônes */
    .stat-item {
        flex-direction: row !important;
        text-align: left !important;
        padding: 1.25rem !important;
        gap: 1rem;
    }
    
    .stat-icon {
        width: 50px !important;
        height: 50px !important;
        font-size: 24px !important;
    }
    
    .stat-number {
        font-size: 32px !important;
    }
    
    .stat-label {
        font-size: 12px !important;
    }
}

/* Mobile - 480px et moins */
@media (max-width: 480px) {
    .hero-badge {
        padding: 0.6rem 1rem;
        font-size: 11px;
        gap: 0.4rem;
        border-radius: 10px;
        max-width: 100%;
        overflow-x: hidden;
    }
    
    .badge-item {
        font-size: 11px;
    }
    
    .badge-item i {
        font-size: 12px;
    }
    
    .stat-item {
        padding: 1rem !important;
    }
    
    .stat-icon {
        width: 45px !important;
        height: 45px !important;
        font-size: 20px !important;
    }
    
    .stat-number {
        font-size: 28px !important;
    }
    
    .stat-label {
        font-size: 11px !important;
    }
}

/* Mobile très petit - 360px et moins */
@media (max-width: 360px) {
    .hero-badge {
        padding: 0.5rem 0.75rem;
        font-size: 10px;
        border-radius: 8px;
    }
    
    .badge-item i {
        font-size: 11px;
    }
    
    .stat-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
    }
    
    .stat-number {
        font-size: 24px !important;
    }
}

