/* ================================================
   I2AJM - Mobile Fix Propre v1.0
   Remplace: mobile-stats-fix.css, mobile-fix.css, settings_loader.js
   Principe: CSS propre avec media queries, pas de JS en boucle
   ================================================ */

/* ================================================
   HERO SECTION - Mobile (<768px)
   ================================================ */
@media (max-width: 767px) {
  /* Hero: Limit height, show content properly */
  section.relative.h-screen {
    min-height: auto !important;
    height: auto !important;
    padding-top: 5rem !important;
    padding-bottom: 2rem !important;
  }

  /* Hero background image - reduced height */
  section.relative.h-screen > .absolute {
    position: absolute !important;
    height: 100% !important;
    min-height: 100% !important;
  }

  /* Hero content container */
  section.relative.h-screen > .container {
    position: relative !important;
    z-index: 10 !important;
    padding-top: 1rem !important;
  }

  /* Hero title - readable size */
  section.relative.h-screen h1 {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
    margin-bottom: 1rem !important;
  }

  /* Hero subtitle */
  section.relative.h-screen p {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
  }

  /* Hero buttons - properly spaced */
  section.relative.h-screen .flex.flex-col {
    gap: 0.75rem !important;
    margin-top: 1rem !important;
  }

  /* CTA buttons visible and tappable */
  section.relative.h-screen a[href="#contact"],
  section.relative.h-screen button {
    padding: 0.75rem 1.5rem !important;
    font-size: 0.9rem !important;
  }
}

/* ================================================
   STATS SECTION - Mobile (<768px)
   ================================================ */
@media (max-width: 767px) {
  /* Stats section: Remove ALL negative margins */
  section[class*="bg-gradient-to-br"][class*="from-brand-green"] {
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
    position: relative !important;
    z-index: 5 !important;
  }

  /* Stats grid: single column on mobile */
  section[class*="bg-gradient-to-br"] .grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Stats numbers - readable size */
  section[class*="bg-gradient-to-br"] .text-5xl,
  section[class*="bg-gradient-to-br"] .text-4xl,
  section[class*="bg-gradient-to-br"] .text-6xl {
    font-size: 2rem !important;
    line-height: 1.2 !important;
  }

  /* Stats labels */
  section[class*="bg-gradient-to-br"] .text-sm,
  section[class*="bg-gradient-to-br"] .text-xs {
    font-size: 0.75rem !important;
  }

  /* Fix overflow on stats and all children */
  section[class*="bg-gradient-to-br"],
  section[class*="bg-gradient-to-br"] * {
    overflow: visible !important;
    overflow-y: visible !important;
  }
}

/* ================================================
   HEADER - Mobile (<768px)
   ================================================ */
@media (max-width: 767px) {
  /* Fixed header - always green */
  header.fixed {
    background-color: #008751 !important;
  }

  /* Header on scroll - still green (don't switch to white on mobile) */
  header.fixed.scrolled {
    background-color: #008751 !important;
  }

  /* Hamburger menu */
  header button[class*="p-2"],
  header button[aria-label*="menu"],
  header button[aria-label*="Menu"] {
    padding: 0.5rem !important;
  }
}

/* ================================================
   PARTENAIRES - Mobile (<768px)
   ================================================ */
@media (max-width: 767px) {
  /* Partners grid: 2 columns on mobile */
  section:not([class*="h-screen"]):not([class*="bg-gradient"]) .grid.gap-8 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  /* Partner logos - smaller */
  section:not([class*="h-screen"]):not([class*="bg-gradient"]) img {
    max-height: 48px !important;
    width: auto !important;
  }
}

/* ================================================
   ACTUALITÉS - Mobile (<768px)
   ================================================ */
@media (max-width: 767px) {
  /* News grid: single column on mobile */
  #news .grid,
  section[id="news"] .grid,
  section:has(+ #news) .grid,
  .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  /* News cards */
  #news .grid > div,
  section[id="news"] .grid > div {
    border: 2px solid #008751 !important;
    border-radius: 8px !important;
    padding: 1rem !important;
    margin-bottom: 1rem !important;
  }

  /* News images - FORCE AFFICHAGE */
  #news .grid img,
  #news img,
  section[id="news"] img,
  section[id="news"] .grid img {
    width: 100% !important;
    height: 180px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    display: block !important;
    margin-bottom: 1rem !important;
  }

  /* Fallback: any img in news section */
  #news img {
    width: 100% !important;
    height: 180px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    display: block !important;
    margin-bottom: 1rem !important;
  }
}

/* Desktop news images */
#news .grid img,
#news img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  display: block !important;
  margin-bottom: 1rem !important;
}

/* ================================================
   CONTACT SECTION - Mobile (<768px)
   ================================================ */
@media (max-width: 767px) {
  /* Contact section */
  #contact {
    padding: 2rem 1rem !important;
  }

  /* Contact form */
  #contact form {
    width: 100% !important;
  }

  /* Contact inputs */
  #contact input,
  #contact textarea {
    width: 100% !important;
    padding: 0.75rem !important;
    font-size: 1rem !important;
  }

  /* Contact button */
  #contact button[type="submit"] {
    width: 100% !important;
    padding: 1rem !important;
  }
}

/* ================================================
   FOOTER - Mobile (<768px)
   ================================================ */
@media (max-width: 767px) {
  footer {
    padding: 2rem 1rem !important;
    text-align: center !important;
  }

  footer .flex {
    flex-direction: column !important;
    gap: 1rem !important;
  }

  footer .grid {
    grid-template-columns: 1fr !important;
  }
}

/* ================================================
   SCROLLBAR - Hide on mobile
   ================================================ */
@media (max-width: 767px) {
  ::-webkit-scrollbar {
    width: 0px !important;
    display: none !important;
  }

  * {
    scrollbar-width: none !important;
  }
}