/* ============================================================
   VOID FIVE M - OPTIMISATION MOBILE GLOBALE
   ============================================================ */

@media (max-width: 768px) {
    
    /* 1. STRUCTURE GÉNÉRALE */
    /* On force tout ce qui est fixe en largeur à devenir fluide */
    body {
        overflow-x: hidden; /* Évite le scroll horizontal moche */
    }

    .container, .main-wrapper, .content {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin: 0 auto !important;
        box-sizing: border-box;
    }

    /* 2. SYSTÈME DE COLONNES (FLEXBOX / GRID) */
    /* On empile les éléments les uns sous les autres au lieu d'être côte à côte */
    .row, .flex-container, .grid-container {
        display: flex !important;
        flex-direction: column !important;
    }

    .col-6, .col-4, .sidebar, .main-content {
        width: 100% !important;
        margin-bottom: 20px;
    }

    /* 3. LEADERBOARDS & TABLEAUX */
    /* Empêche les tableaux de casser la mise en page */
    table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        white-space: nowrap; /* Permet de swiper le tableau de gauche à droite */
        -webkit-overflow-scrolling: touch;
    }

    /* 4. TYPOGRAPHIE */
    h1 { font-size: 26px !important; }
    h2 { font-size: 22px !important; }
    p, span, li { font-size: 16px !important; }

    /* 5. NAVIGATION / MENU */
    /* Si ton menu est une liste horizontale, on l'adapte */
    nav ul {
        flex-direction: column !important;
        text-align: center;
        padding: 0 !important;
    }

    nav ul li {
        margin: 10px 0 !important;
    }

    /* 6. IMAGES & BANNIÈRES */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Ajustement de la bannière de profil pour mobile */
    .user-banner {
        height: 200px !important; /* On réduit la hauteur sur mobile */
        background-size: cover !important;
    }

    /* 7. FORMULAIRES & BOUTONS */
    input, button, select {
        width: 100% !important; /* Les boutons prennent toute la largeur sur mobile */
        height: 45px !important; /* Plus facile de cliquer avec le doigt */
        font-size: 16px !important;
    }
}

/* Petits ajustements pour très petits écrans (iPhone SE, etc.) */
@media (max-width: 480px) {
    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

@media (max-width: 768px) {
    /* 1. On force le header à s'étirer et à centrer son contenu */
    header, .nav-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        height: auto !important; /* On laisse le header grandir selon le contenu */
        padding: 20px 0 !important;
        position: relative !important;
    }

    /* 2. On aligne les liens du menu proprement l'un sous l'autre */
    nav ul {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important; /* Espace entre chaque lien */
        margin: 20px 0 !important;
    }

    /* 3. On remet le bouton Discord à sa place (en bas du menu) */
    .discord-btn, .login-btn, [href*="discord"] {
        position: static !important; /* On casse le position: absolute s'il y en a un */
        margin: 10px auto !important;
        width: 80% !important; /* Un gros bouton facile à cliquer */
        max-width: 250px;
        display: flex !important;
        justify-content: center !important;
    }

    /* 4. On s'assure que le logo ne prend pas trop de place */
    .logo, header img:first-child {
        margin-bottom: 15px !important;
        max-height: 50px !important;
        width: auto !important;
    }

    /* 5. Correction pour ton titre "AJOUTS DE LA COMMUNAUTÉ" */
    .ajouts-title, h2 {
        text-align: center !important;
        font-size: 20px !important;
        line-height: 1.4 !important;
    }
}