html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
  background-image: none !important;
  scroll-behavior: smooth;
  background-color: #f8f9fa;

}

/* 2. STRUCTURE DES SECTIONS (SQUELETTE) */

.ma-section-aimantee,
.hero-section {
  min-height: 100vh !important;
  width: 100%;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 60px 20px;

}

/* 3. HEADER FIXE (LOGO & MENU) */
.site-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
  background-color: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid #eee;
}

/* Ajuste la taille du logo */
.site-logo-img img {
  max-width: 80px !important;
  height: auto;
}

/* 4. NETTOYAGE DES CONTENEURS ASTRA/SPECTRA */
/* On force le contenu à respecter la largeur définie dans le Customizer */
.ast-container {
  max-width: 1200px !important;
  /* Largeur de base clean */
  margin: 0 auto !important;
}

#page,
#content,
.site-content {
  background: none !important;
}

/* 5. RESPONSIVITÉ DE BASE */
@media (max-width: 768px) {
  .site-logo-img img {
    max-width: 60px !important;
    /* Plus petit sur téléphone */
  }
}

/* 6. ALIGNEMENT DES CONTENUS INTERNES */
.ma-section-aimantee>.wp-block-uagb-container,
.hero-section>.wp-block-uagb-container {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  /* Centre verticalement */
  align-items: center !important;
  /* Centre horizontalement */
  text-align: center !important;
  /* Centre le texte */
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

.ma-section-aimantee h1,
.ma-section-aimantee h2,
.ma-section-aimantee .uagb-buttons-wrapper {
  margin-bottom: 30px !important;
}

.site-header-section>.ast-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
}