/* CSS spécifique pour corriger le centrage des bonus sur mobile uniquement */
/* Garantit que ces styles ne s'appliquent pas sur les ordinateurs */

/* Style par défaut pour assurer la grille sur desktop */
@media screen and (min-width: 769px) {
    .bonus-list {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
        gap: 25px !important;
    }
}
@media screen and (max-width: 768px) {
    .bonus-section .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .bonus-list {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: none !important;
        text-align: center !important;
        padding: 0 !important;
    }
    
    /* Désactiver explicitement la grille sur mobile */
    .bonus-list {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .bonus-item {
        display: inline-block !important;
        margin: 0 auto 20px auto !important;
        float: none !important;
        width: 85% !important;
        max-width: 320px !important;
        box-sizing: border-box !important;
    }
}

/* Styles spécifiques pour très petits écrans */
@media screen and (max-width: 576px) {
    .bonus-section {
        padding: 40px 0 30px !important;
    }
    
    .bonus-section .container {
        margin: 0 !important;
    }
    
    .bonus-list {
        margin: 0 !important;
    }
    
    .bonus-item {
        width: 90% !important;
        margin: 0 auto 15px auto !important;
    }
}