/**
 * 🎯 CLASSES UTILITAIRES POUR L'ESPACEMENT VERTICAL DES SECTIONS
 *
 * Ces classes sont générées automatiquement par les champs ACF
 * "Espacement haut" et "Espacement bas" dans les sections flexibles
 *
 * Valeurs disponibles : 30px, 50px, 70px, ou personnalisé
 */

/* ========================================
   ESPACEMENT HAUT (padding-top)
   ======================================== */

.spacing-top-30 {
    padding-top: 30px !important;
}

.spacing-top-50 {
    padding-top: 50px !important;
}

.spacing-top-70 {
    padding-top: 70px !important;
}

/* ========================================
   ESPACEMENT BAS (padding-bottom)
   ======================================== */

.spacing-bottom-30 {
    padding-bottom: 30px !important;
}

.spacing-bottom-50 {
    padding-bottom: 50px !important;
}

.spacing-bottom-70 {
    padding-bottom: 70px !important;
}

/* ========================================
   RESPONSIVE : Ajustement pour mobile
   ======================================== */

@media (max-width: 768px) {
    /* Réduire les espacements sur mobile (environ 2/3 de la valeur desktop) */
    .spacing-top-30 {
        padding-top: 20px !important;
    }

    .spacing-top-50 {
        padding-top: 35px !important;
    }

    .spacing-top-70 {
        padding-top: 50px !important;
    }

    .spacing-bottom-30 {
        padding-bottom: 20px !important;
    }

    .spacing-bottom-50 {
        padding-bottom: 35px !important;
    }

    .spacing-bottom-70 {
        padding-bottom: 50px !important;
    }
}