/* Media Query pour mobiles */


@media (max-width: 768px) {

    .main-header .container {
        flex-direction: column; /* On empile le logo et le menu */
        padding: 15px 0;
    }

    .logo {
        max-width: 150px; /* On réduit la taille du logo sur mobile */
        margin-bottom: 10px;
    }
    h1 {
        font-size: 1.8rem !important; /* On réduit la taille pour que ça tienne sur 2-3 lignes max */
        line-height: 1.2;
        padding: 10px; /* On évite que le texte colle aux bords de l'écran */
        text-align: center;
    }
    
    /* Si tu as un sous-titre ou du texte dans le Hero */
    .hero-content p {font-size: 1rem;}

     
    /* Si tes cartes ont des ombres, elles ne seront plus coupées */
    .card {
        width: 100%;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    /* Navigation  */
    /*.main-nav {
        position: fixed;
        top: 0;
        /*right: -100%; /* Caché */
       /* width: 100%;  /* Ou 80% si tu veux voir le site derrière */
       /* height: 100vh;
        margin: 0;    /* IMPORTANT : pas de marges externes */
        /*padding: 50px 20px; /* Marges internes sécurisées */
       /* box-sizing: border-box; 
    }*/
    
    .container-main, .news-grid, .input-row{ grid-template-columns: 1fr; /* 1 seule colonne*/}

    /*            annuaire         */
    .adherents-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* Force les 2 colonnes */
        gap: 10px !important; /* Espace réduit pour que ça rentre */
        padding: 10px !important;
    }

    .adherent-card {
        width: 100% !important; /* Empêche la carte de déborder */
    }

    .main-nav.active {right: 0; /* Aligné pile sur le bord droit */}

    .main-nav a::after { display: none; /* On enlève le trait sur mobile pour plus de clarté */ }


    .form-grid {display: block; /* On désactive la grille pour empiler les éléments les uns sous les autres */}

    .form-group {
        width: 100%;    /* Chaque champ prend toute la largeur disponible */
        margin-bottom: 15px;
    }

    .form-group input,.form-group select,.form-group textarea {
        width: 100%;    /* Force les champs à ne pas dépasser du parent */
        box-sizing: border-box; /* Empêche le padding de faire déborder le champ */
    }

    /*  La section contact  Tout passe sur une seule colonne                                                     */

    
    .top-section-grid, 
    .bureau-mini-grid, 
    .input-row {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .member-mini-card {width: 100%;}

    .presentation-asso {margin-bottom: 30px;}

    .form-card {padding: 25px 20px;}

    .card-body p{display: none;}

    
}