/* téléphone*/

@media (max-width: 575.98px) {

  
    .wrapper-section-infos::before { 
        top: -580px !important; 
    }
    .wrapper-section-infos::after { 
        bottom: -580px !important; 
    }

    main.hero-section section.total h1.hero-title,
    main.hero-section section.total h1 { 
        font-size: 1.2rem !important;
        text-align: center !important;
    }

    
    .activities-container {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 40px !important;
        padding: 0 15px !important;
    }

    
    .activities-container .activity-card {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important; 
        flex: 0 0 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin-bottom: 20px !important;
        align-items: center !important; 
    }

    .activities-container .card-image {
        width: 100% !important;
        height: 220px !important;
    }


    .activities-container .card-body {
        width: 100% !important;
        padding: 20px 0 !important;
        text-align: center !important; 
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; 
    }


    .site-footer .container-fluid > .row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; 
        gap: 15px !important;
        align-items: start !important;
    }

    .footer-logo {
        max-width: 90px !important;
        height: auto !important;
    }

    .footer-menu-grid {
        display: flex !important;
        flex-direction: column !important;
        text-align: left !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .footer-menu-grid li.footer-activities > ul,
    .footer-menu-grid li ul.sub-menu {
        display: flex !important;
        flex-direction: column !important;
        column-count: 1 !important;
        padding: 0 !important;
        margin-top: 10px !important;
    }


    .site-footer .col-md-3.text-end {
        grid-column: span 2 !important;
        text-align: center !important;
        margin-top: 30px !important;
        border-top: 1px solid rgba(255,255,255,0.1) !important;
    }

    .galerie-item {
    width: 100% !important; 
    float: none !important;
    position: relative !important;
    left: 0 !important;
    top: auto !important;
    }

    .galerie-grid {
    height: auto !important; 
    }

   .filter-button-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    }
}



/*tablette */

@media (max-width: 991.98px) {
    .hero-title, .total h1 { 
        font-size: 2.2rem !important; 
    }

    /* Optimisation Formulaire Contact Tablette/Desktop */
    .black-form-card {
        padding: 50px 40px !important;
        max-width: 100% !important;
    }

    .wpforms-custom-style input, 
    .wpforms-custom-style textarea {
        width: 100% !important; /* On élargit les champs */
        padding: 12px !important;
    }

    /* --- 3. FOOTER TABLETTE (Structure équilibrée) --- */
    /* On passe sur 2 colonnes pour éviter que le texte ne se chevauche */
    .footer-menu-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 30px !important;
    }

    /* Le sous-menu des activités sur 2 colonnes au lieu de 3 */
    .footer-menu-grid li ul.sub-menu {
        column-count: 2 !important;
        max-width: 100% !important;
    }

    /* On aligne le logo et les infos de contact */
    .site-footer .container-fluid > .row {
        align-items: center !important;
    }

    .footer-logo {
        max-width: 130px !important;
    }

    /* --- 4. GALERIE TABLETTE --- */
    .galerie-item {
        width: 50% !important; /* 2 images par ligne sur tablette */
    }


}