/* =========================================
   GEMS RACING - RESPONSIVE MOBILE PROPRE (CORRIGÉ)
   ========================================= */

html,
body {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

* {
  box-sizing: border-box !important;
}

img,
video,
iframe {
  max-width: 100% !important;
}

/* Le header ne doit jamais dépasser l'écran */
header {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

/* Le contenu principal reste dans la largeur */
main,
section,
article,
.hero,
.hero-section,
.home-hero,
.banner,
.container,
.content,
.page-content {
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Hero mobile */
.hero,
.hero-section,
.home-hero,
.banner {
  width: 100% !important;
  min-height: 600px !important;
  padding: 70px 22px 60px !important;
  overflow: hidden !important;
}

/* Texte toujours à gauche */
.hero-content,
.hero-inner,
.hero-copy,
.hero-text,
.banner-content,
.home-hero-content {
  width: 100% !important;
  max-width: 680px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  align-items: flex-start !important;
}

/* Titre responsive sans débordement */
.hero h1,
.hero h2,
.hero-title,
.hero-heading,
.home-hero h1,
.banner h1 {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  font-size: clamp(38px, 11vw, 70px) !important;
  line-height: .96 !important;
  letter-spacing: -1px !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  text-align: left !important;
}

/* Texte */
.hero p,
.hero-description,
.hero-text p,
.home-hero p,
.banner p {
  width: 100% !important;
  max-width: 560px !important;
  margin: 0 0 24px !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
  text-align: left !important;
}

/* Boutons */
.hero-actions,
.hero-buttons,
.cta-group,
.button-group,
.hero .buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 !important;
}

.hero-actions a,
.hero-buttons a,
.cta-group a,
.button-group a,
.hero button,
.hero .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
}

/* Menu hamburger */
.gems-menu-toggle {
  display: none;
}

/* Mobile */
@media (max-width: 800px) {
  header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 76px !important;
    padding: 12px 16px !important;
  }

  header img,
  header .logo img,
  .logo img {
    width: auto !important;
    max-width: 145px !important;
    max-height: 52px !important;
  }

  .gems-menu-toggle {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 44px !important;
    height: 42px !important;
    margin-left: auto !important;
    padding: 8px !important;
    background: #071b35 !important;
    border: 1px solid rgba(255,255,255,.7) !important;
    z-index: 2000 !important;
  }

  .gems-menu-toggle span {
    display: block !important;
    width: 100% !important;
    height: 3px !important;
    background: #f28c28 !important;
  }

  /* Tous les menus sont cachés par défaut */
  header nav.menu, /* TARGET nav.menu HERE */
  header > nav.menu, /* TARGET nav.menu HERE */
  .site-nav,
  .main-nav {
    display: none !important;
    position: absolute !important;
    top: 76px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 18px !important;
    background: #06172d !important;
    border-top: 2px solid #f28c28 !important;
    z-index: 1500 !important;
  }

  header nav.menu.gems-mobile-open, /* TARGET nav.menu HERE */
  header > nav.menu.gems-mobile-open, /* TARGET nav.menu HERE */
  .site-nav.gems-mobile-open,
  .main-nav.gems-mobile-open {
    display: block !important;
  }

  header nav.menu a, /* TARGET nav.menu a HERE */
  header > nav.menu a, /* TARGET nav.menu a HERE */
  .site-nav a,
  .main-nav a {
    display: block !important;
    width: 100% !important;
    padding: 13px 8px !important;
    color: #fff !important;
    text-align: left !important;
    white-space: normal !important;
  }

  /* Hero */
  .hero,
  .hero-section,
  .home-hero,
  .banner {
    min-height: 620px !important;
    padding: 72px 22px 55px !important;
  }

  /* Statistiques en deux colonnes */
  .stats,
  .stats-grid,
  .statistics,
  .cards-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
  }

  /* Désactivation des effets gênants */
  
}

@media (max-width: 480px) {
  .hero,
  .hero-section,
  .home-hero,
  .banner {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .hero h1,
  .hero h2,
  .hero-title,
  .hero-heading,
  .home-hero h1,
  .banner h1 {
    font-size: clamp(36px, 11vw, 56px) !important;
  }

  .hero-actions,
  .hero-buttons,
  .cta-group,
  .button-group,
  .hero .buttons {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .hero-actions a,
  .hero-buttons a,
  .cta-group a,
  .button-group a {
    width: auto !important;
  }
}