/* ============================================
   OPTIMISATIONS GLOBALES MOBILE
   ============================================ */

@media (max-width: 768px) {
    /* Sections.
       Le hero est exclu : il gère lui-même sa hauteur et réserve la place
       du menu fixe en haut. Sans cette exception, le !important écrasait
       ce calage et le nom passait sous le menu sur les petits écrans. */
    section:not(.hero-section) {
        padding: 3rem 0 !important;
    }

    /* Réduction des marges des containers Bootstrap */
    .container, .container-fluid {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Réduction de l'espace entre les rows */
    .row {
        --bs-gutter-x: 1rem;
    }

    /* Colonnes Bootstrap plus compactes */
    [class*="col-"] {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Buttons global */
    .btn {
        font-size: 0.9rem !important;
        padding: 0.7rem 1.5rem !important;
    }
}

@media (max-width: 480px) {
    /* Sections (hero exclu, voir plus haut) */
    section:not(.hero-section) {
        padding: 2.5rem 0 !important;
    }

    /* Buttons */
    .btn {
        font-size: 0.85rem !important;
        padding: 0.6rem 1.2rem !important;
    }
}