/* ==========================================
   SERVME - SECTIONS MOBILE HERO PAGES
   Hero sections pages (offres/pricing/contact/legal) - MOBILE uniquement
   Responsive mobile pour toutes les pages sauf landing
   ========================================== */

@media (max-width: 768px) {
  /* ========================================
     HERO PAGES MOBILE - Compact
     TYPE "DROITE" : offres, pricing, contact
     ======================================== */
  
  .hero-offres,
  .hero-pricing,
  .hero-contact {
    min-height: 50vh !important; /* Réduit pour mobile */
    background-attachment: scroll !important; /* Fixed non supporté mobile */
    background-size: cover !important;
    background-position: center center !important;
    padding-top: 0 !important;
    padding-bottom: 2rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* ========================================
     HERO LEGAL MOBILE - Compact
     TYPE "CARTE" : legal, terms, privacy, cookies
     ======================================== */
  
  .hero-legal {
    min-height: 50vh !important;
    background-attachment: scroll !important;
    background-size: cover !important;
    background-position: center center !important;
    padding-top: 0 !important;
    padding-bottom: 2rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* ========================================
     CONTAINER MOBILE - Padding réduit
     ======================================== */
  
  .hero-offres .container,
  .hero-pricing .container,
  .hero-contact .container,
  .hero-legal .container {
    padding: 80px 20px 20px !important; /* Compenser header mobile */
    text-align: center !important;
  }
  
  /* ========================================
     HERO CONTENT MOBILE
     ======================================== */
  
  .hero-contact .hero-content,
  .hero-legal .hero-content {
    padding: 80px 20px 20px !important;
    text-align: center !important;
    
    /* Centrage flex */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* ========================================
     TITRES MOBILE
     ======================================== */
  
  .hero-offres h1,
  .hero-pricing h1,
  .hero-contact h1,
  .hero-contact .hero-title,
  .hero-legal h1,
  .hero-legal .hero-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-TITRES MOBILE
     ======================================== */
  
  .hero-subtitle {
    font-size: 1rem !important; /* 16px au lieu de 22px */
    margin-bottom: 1rem !important;
    line-height: 1.4 !important;
    opacity: 0.95 !important;
  }
}