/* ==========================================
   SERVME - SECTIONS MOBILE HERO LANDING
   Hero section landing page - MOBILE uniquement
   Responsive mobile pour index.html
   ========================================== */

@media (max-width: 768px) {
  /* ========================================
     HERO MOBILE - Compact et optimisé
     ======================================== */
  
  .hero,
  .landing-hero {
    min-height: 100vh !important; /* Plein écran pour meilleure proportion mobile */
    background-attachment: scroll !important; /* Fixed non supporté mobile */
    background-size: cover !important;
    background-position: center center !important;
  }
  
  /* ========================================
     HERO CONTENT MOBILE
     ======================================== */
  
  .landing-content {
    padding: 50px 20px 40px !important; /* Padding mobile compact - position plus haute (réduit de 30px) */
    text-align: center !important;
  }
  
  /* ========================================
     TITRE MOBILE
     ======================================== */
  
  .landing-content h1,
  .landing-title {
    font-size: 1.75rem !important; /* 28px au lieu de 48px */
    margin-bottom: 0.75rem !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
  }
  
  /* ========================================
     SOUS-TITRE MOBILE
     ======================================== */
  
  .landing-content p,
  .landing-subtitle {
    font-size: 1rem !important; /* 16px au lieu de 22px */
    margin-bottom: 1.5rem !important;
    line-height: 1.4 !important;
    opacity: 0.95 !important;
  }
  
  /* ========================================
     BOUTONS MOBILE
     ======================================== */
  
  .landing-content > div {
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .landing-content > div a,
  .landing-content > div button {
    width: 100% !important;
    max-width: 280px !important;
  }
}