/* ===========================
   ENHANCED CARDS - Version simplifiée
   Cartes avec bordures simples, sans effets visuels
   Background blanc pour la page
   =========================== */

/* ===========================
   GLOBAL STYLES
   =========================== */

/* Background blanc pour toute la page */
body {
  background: white;
  background-attachment: fixed;
  min-height: 100vh;
}

/* Transitions fluides globales */
* {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===========================
   HERO SECTION
   =========================== */

#top {
  padding: 0 !important;
  margin: 10px !important;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Card Hero - VERSION SIMPLE AVEC DÉGRADÉ */
#top .relative.max-w-7xl {
  max-width: 100% !important;
  width: 100% !important;
  background: linear-gradient(135deg, #ffffff 0%, #d6e6f8 50%, #3889d9 100%) !important;
  border-radius: 2rem;
  padding: 10rem 8rem !important;
  min-height: 918px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Contenu interne hero - taille limitée */
#top .text-center {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Limiter la largeur du contenu interne de toutes les cards */
#top .relative.max-w-7xl > * {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

/* ===========================
   FEATURES SECTION
   =========================== */

section:has(#feature-text) {
  padding: 0 !important;
  margin: 10px !important;
}

/* Wrapper de la card features - VERSION SIMPLE */
section:has(#feature-text) .mx-auto.max-w-7xl {
  max-width: 100% !important;
  width: 100% !important;
  background: #F0F6FF;;
  border-radius: 2rem;
  padding: 10rem 8rem !important;
  position: relative;
  overflow: hidden;
}

/* Limiter la largeur du contenu interne Features */
section:has(#feature-text) .mx-auto.max-w-7xl > * {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;

}

/* ===========================
   INDUSTRIES SECTION - UNE SEULE CARD
   =========================== */

#industries {
  padding: 0 !important;
  margin: 0 !important;
  background: #F8FBFF;
  border-radius: 2rem;
  position: relative;
  overflow: hidden;
}

/* Wrapper interne Industries */
#industries .relative.mx-auto {
  max-width: 95rem !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 2rem 2rem !important;
  min-height: auto !important;
  position: relative;
  overflow: visible !important;
}

/* Limiter la largeur du contenu interne Industries */
#industries .relative.mx-auto > * {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

/* ===========================
   HOW IT WORKS SECTION
   =========================== */

#how {
  padding: 0 !important;
  margin: 0 !important;
}

/* Card principale How - VERSION SIMPLE */
#how .mx-auto.max-w-7xl {
  max-width: 100% !important;
  width: 100% !important;
  background: #F0F6FF !important;
  border-radius: 2rem;
  padding: 4rem 3rem !important;
  position: relative;
  overflow: hidden;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

/* Limiter la largeur du contenu interne How */
#how .mx-auto.max-w-7xl > * {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

/* DESKTOP : Ligne parfaitement alignée avec les points (>1200px) */
@media (min-width: 1201px) {
  #how .animated-line {
    left: 30px !important;  /* Position du premier point (translateX(30px)) */
    right: calc(22.02% - 39px) !important;  /* Position du dernier point */
  }
}

/* ===========================
   CONTACT SECTION
   =========================== */

#contact {
  padding: 0 !important;    
  margin: 0 !important;
}

/* Wrapper principal contact - Card VERSION SIMPLE */
#contact .mx-auto.max-w-7xl {
  max-width: 100% !important;
  width: 100% !important;
  background:#F8FBFF !important;
  border-radius: 2rem;
  padding: 10rem 8rem !important;
  min-height: 850px;
  position: relative;
  overflow: hidden;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

/* Limiter la largeur du contenu interne Contact */
#contact .mx-auto.max-w-7xl > * {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

/* Card formulaire - style simple */
#contact .lg\:col-span-2 {
  background: white !important;
  border: 1px solid var(--card-border-color) !important;
  border-radius: 1.75rem !important;
  padding: 3.5rem !important;
}

/* Card company info - style simple */
#contact .mx-auto.max-w-7xl > .mt-10 > div:last-child {
  background:white !important;
  border: 1px solid var(--card-border-color) !important;
  border-radius: 1.75rem !important;
  padding: 3rem !important;
}

/* ===========================
   FOOTER SECTION - CARD STYLE
   =========================== */

footer {
  padding: 0 !important;
  margin: 0 px !important;
  background: transparent !important;
}

/* Wrapper principal footer - Card VERSION SIMPLE */
footer > .mx-auto.max-w-7xl:first-child {
  max-width: 100% !important;
  width: 100% !important;
  background: #F0F6FF !important;
  border-radius: 2rem;
  padding: 3rem 2rem !important;
  position: relative;
  overflow: hidden;
}

/* Limiter la largeur du contenu interne Footer */
footer > .mx-auto.max-w-7xl:first-child > * {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

/* Copyright bar en dehors de la card */
footer > .text-center.py-5 {
  background: transparent !important;
  margin-top: 1rem;
}

/* ===========================
   RESPONSIVE - FOOTER
   =========================== */

@media (max-width: 1024px) {
  footer > .mx-auto.max-w-7xl:first-child {
    padding: 2.5rem 2rem !important;
  }
}

@media (max-width: 768px) {
  footer > .mx-auto.max-w-7xl:first-child {
    padding: 2rem 1.5rem !important;
    border-radius: 1.5rem;
  }
}

@media (max-width: 480px) {
  footer > .mx-auto.max-w-7xl:first-child {
    padding: 1.5rem 1rem !important;
  }
}

/* ===========================
   RESPONSIVE - TABLET
   =========================== */

@media (max-width: 1024px) {
  #top .relative.max-w-7xl,
  section:has(#feature-text) .mx-auto.max-w-7xl,
  #product .relative.bg-white\/60,
  #how .mx-auto.max-w-7xl,
  #contact .mx-auto.max-w-7xl {
    padding: 7rem 5rem !important;
  }
  
  #pilot .mx-auto.max-w-7xl > .rounded-2xl {
    padding: 6rem 4.5rem !important;
  }

}

/* ===========================
   RESPONSIVE - MOBILE
   =========================== */

@media (max-width: 768px) {
  /* Toutes les cards principales sur mobile */
  #top .relative.max-w-7xl,
  section:has(#feature-text) .mx-auto.max-w-7xl,
  #product .relative.bg-white\/60,
  #how .mx-auto.max-w-7xl,
  #contact .mx-auto.max-w-7xl {
    padding: 3rem 2rem !important;
    border-radius: 1.5rem;
    min-height: auto;
  }
  
  #pilot .mx-auto.max-w-7xl > .rounded-2xl {
    padding: 2.5rem 2rem !important;
    border-radius: 1.5rem !important;
    min-height: auto;
  }
  
  /* Cards internes contact */
  #contact .lg\:col-span-2 {
    padding: 2rem !important;
    border-radius: 1.5rem !important;
  }
  
  #contact .mx-auto.max-w-7xl > .mt-10 > div:last-child {
    padding: 2rem !important;
    border-radius: 1.5rem !important;
  }
  
  /* Hero mobile */
  #top .relative.max-w-7xl {
    min-height: 550px;
  }
  
}

@media (max-width: 480px) {
  #top .relative.max-w-7xl,
  section:has(#feature-text) .mx-auto.max-w-7xl,
  #product .relative.bg-white\/60,
  #how .mx-auto.max-w-7xl,
  #contact .mx-auto.max-w-7xl {
    padding: 2.5rem 1.5rem !important;
  }
  
  #pilot .mx-auto.max-w-7xl > .rounded-2xl {
    padding: 2rem 1.5rem !important;
  }

}

/* ===========================
   AMÉLIORATIONS VISUELLES
   =========================== */

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* Amélioration focus pour accessibilité */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #1E6DF6;
  outline-offset: 4px;
  border-radius: 0.5rem;
}