/* Waka Groupe - CSS pour forcer l'utilisation de toute la largeur sur mobile */

/* ==================================
   FORCER PLEINE LARGEUR SUR ÉCRANS < 426px
   ================================== */

@media (max-width: 425px) {
    /* Neutraliser TOUS les conteneurs parents qui pourraient ajouter des marges */
    * {
        box-sizing: border-box !important;
    }
    
    /* Conteneurs WooCommerce */
    .woocommerce,
    .woocommerce-MyAccount-content,
    .woocommerce-page,
    .woocommerce-account {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Conteneurs WordPress */
    body,
    .site,
    .site-content,
    .content-area,
    .site-main,
    .entry-content,
    .page-content {
        padding: 0 !important;
        margin: 0 !important;
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    
    /* Conteneurs spécifiques au plugin */
    .waka-mes-groupes-container,
    .waka-groupe-container {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Grille compacte - FORCER la pleine largeur SANS dépasser */
    .waka-groupe-grid-compact {
        gap: 8px !important;
        padding: 4px !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        overflow-x: hidden !important;
    }
    
    /* Cartes de groupes - FORCER la pleine largeur SANS dépasser */
    .waka-groupe-card-compact {
        padding: 12px !important;
        margin: 0 !important;
        width: calc(100% - 8px) !important;
        max-width: calc(100% - 8px) !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    /* Boutons - FORCER la pleine largeur avec centrage parfait */
    .waka-button,
    .waka-button-secondary {
        width: 100% !important;
        margin: 0 !important;
        padding: 12px 16px !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        min-height: 48px !important;
    }
    
    /* S'assurer qu'aucun élément ne déborde */
    .waka-groupe-grid-compact * {
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    /* Règle globale pour empêcher tout débordement horizontal */
    html, body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    
    /* Forcer le conteneur à utiliser toute la largeur de l'écran */
    .waka-groupe-grid-compact::before,
    .waka-groupe-grid-compact::after {
        content: '';
        display: none;
    }
}

/* ==================================
   RÈGLES ULTRA-AGRESSIVES POUR ÉCRANS TRÈS PETITS
   ================================== */

@media (max-width: 375px) {
    .waka-groupe-grid-compact {
        gap: 6px !important;
        padding: 2px !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    .waka-groupe-card-compact {
        padding: 10px !important;
        margin: 0 !important;
        width: calc(100% - 4px) !important;
        max-width: calc(100% - 4px) !important;
        overflow-x: hidden !important;
    }
}

/* ==================================
   RÈGLES POUR ÉCRANS ULTRA-PETITS (iPhone SE)
   ================================== */

@media (max-width: 320px) {
    .waka-groupe-grid-compact {
        gap: 4px !important;
        padding: 1px !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    .waka-groupe-card-compact {
        padding: 8px !important;
        margin: 0 !important;
        width: calc(100% - 2px) !important;
        max-width: calc(100% - 2px) !important;
        overflow-x: hidden !important;
    }
}