/* ==========================================
   SERVME - LAYOUT MOBILE FOOTER
   Footer mobile refactorisé - RESPONSIVE uniquement
   Extrait de global-footer.css @media (max-width: 768px)
   Refactorisé proprement
   ========================================== */

@media (max-width: 768px) {
  /* ========================================
     FOOTER MOBILE - BASE
     Footer avec layout 2 colonnes puis 1 colonne
     ======================================== */
  
  .servme-footer {
    padding: 3rem 0 1.5rem !important;
    margin-top: 0 !important;
    border-top: none !important;
  }
  
  .servme-footer .footer-container {
    padding: 0 1.5rem !important;
  }
  
  /* Grid 2 colonnes sur mobile standard */
  .servme-footer .footer-content {
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
  }
  
  /* Première section (Brand) prend toute la largeur */
  .servme-footer .footer-section:first-child {
    grid-column: 1 / -1 !important;
  }
  
  /* Description centrée et pleine largeur */
  .servme-footer .footer-description {
    max-width: 100% !important;
    margin: 0 auto 1.5rem !important;
    text-align: center !important;
  }
  
  /* Réseaux sociaux centrés */
  .servme-footer .footer-social {
    justify-content: center !important;
  }
}

/* ========================================
   FOOTER MOBILE - TRÈS PETIT ÉCRAN
   Layout 1 colonne sur très petit mobile
   ======================================== */

@media (max-width: 480px) {
  .servme-footer .footer-content {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }
  
  .servme-footer .footer-section {
    text-align: center !important;
  }
  
  /* Réseaux sociaux centrés */
  .servme-footer .footer-social {
    justify-content: center !important;
  }
}