@charset "UTF-8";
/* ===============================
   HEADER
================================ */
.site-header {
  width: 100%;
  position: relative;
  z-index: 10;
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ===============================
   LOGO
================================ */
.header-logo {
  display: flex;
  align-items: center;
}
.header-logo img {
  max-height: 42px;
  width: auto;
  display: block;
}

/* ===============================
   NAV DESKTOP
================================ */
.header-nav .nav-menu ul {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.header-nav .nav-menu li {
  margin: 0;
}
.header-nav .nav-menu a {
  font-family: "Lufga", sans-serif;
  font-size: 17px;
  font-weight: 400;
  color: #310579;
  text-decoration: none;
  transition: all 0.3s ease;
}
.header-nav .nav-menu a:hover {
  color: #33057E;
}
.header-nav .nav-menu .current_page_item > a {
  font-weight: 600;
}

/* ===============================
   CTA DESKTOP
================================ */
.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  border-radius: 999px;
  background-color: #F6E860;
  color: #33057E;
  font-family: "Lufga", sans-serif;
  font-size: 13px;
  font-weight: 400;
  text-decoration: none;
  transition: all 0.3s ease;
}
.header-cta:hover {
  background-color: #33057E;
  color: #ffffff;
}
.header-cta:hover svg path {
  fill: #fff;
}

/* ===============================
   BURGER BUTTON
================================ */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 6px;
}
.menu-toggle span {
  width: 26px;
  height: 3px;
  background: #310579;
  border-radius: 3px;
  transition: all 0.3s ease;
}
.menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* ===============================
   MOBILE MENU OVERLAY
================================ */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: 0.35s ease;
}
.mobile-menu.active {
  opacity: 1;
  pointer-events: auto;
}

/* ===============================
   MOBILE POPUP
================================ */
.mobile-nav {
  background: #fff;
  border-radius: 20px;
  padding: 48px 28px 36px;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  position: relative;
  animation: fadeUp 0.4s ease;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ===============================
   CLOSE BUTTON
================================ */
.menu-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #310579;
}

/* ===============================
   MOBILE NAV LINKS
================================ */
.mobile-nav-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mobile-nav-menu li {
  margin-bottom: 22px;
}
.mobile-nav-menu a {
  font-family: "Lufga", sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: #310579;
  text-decoration: none;
}

/* ===============================
   MOBILE CTA (SEPARÉE EN BAS)
================================ */
.mobile-cta {
  margin-top: 40px;
  align-self: center;
  padding: 14px 28px;
  border-radius: 999px;
  background: #F6E860;
  color: #33057E;
  font-family: "Lufga", sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

/* ===============================
   RESPONSIVE
================================ */
@media (max-width: 992px) {
  .header-nav,
  .header-cta {
    display: none;
  }
  .menu-toggle {
    display: flex;
  }
}
/* Empêcher menu ouvert en desktop */
@media (min-width: 993px) {
  .mobile-menu {
    display: none !important;
  }
}
@media (max-width: 370px) {
  .mobile-nav {
    max-width: 90%;
    padding: 36px 20px;
  }
  .mobile-nav-menu a {
    font-size: 18px;
  }
}
body, html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", "Montserrat", sans-serif;
}

/* -------------------- HERO -------------------- */
.hero-main {
  position: relative;
  z-index: 1;
  margin-top: -80px;
  width: 100%;
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
}

/* Conteneur interne */
.hero-container {
  max-width: 1200px;
  margin: 0 auto;
  gap: 40px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

/* Texte hero */
.hero-content {
  flex: 1;
  min-width: 280px;
}

.hero-content h1 {
  color: #000;
  font-family: "Lufga", sans-serif;
  font-size: 56.937px;
  margin: 0;
  font-weight: 700;
  line-height: 75.542px; /* 132.677% */
  position: relative;
}

.hero-content p {
  color: #000;
  font-family: "Lufga", sans-serif;
  font-size: 15.408px;
  font-weight: 400;
  line-height: 28.247px;
}

.hero-content p strong {
  color: var(--Color, #33057E);
  font-family: "Lufga", sans-serif;
  font-size: 15.408px;
  font-style: normal;
  font-weight: 600;
  line-height: 28.247px;
}

.highlight-yellow {
  position: relative;
  display: inline-block;
}

.highlight-yellow::after {
  content: "";
  position: absolute;
  left: -5%;
  bottom: 8px;
  width: 110%;
  height: 12px;
  background: #F7E15E;
  z-index: -1;
  border-radius: 10px;
  opacity: 0.8;
}

.hero-text::after {
  content: "";
  display: block;
  width: 255px;
  height: 60px;
  margin-left: -5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='255' height='60' viewBox='0 0 255 60' fill='none'%3E%3Cpath d='M18.8905 28.3872C18.0394 27.9762 18.1671 27.5247 19.3403 27.1272C20.5123 26.7299 22.622 26.42 25.2233 26.263C27.826 26.1063 30.735 26.1147 33.3195 26.2859C35.9027 26.4571 37.9442 26.7773 39.0896 27.1703C40.1502 27.5298 41.2672 27.8911 42.4281 28.2485C45.1203 29.077 48.041 29.8923 51.1349 30.6951C64.5734 34.1708 80.774 37.648 102.894 40.06C115.03 41.3782 128.459 42.4079 142.484 43.0407C145 43.1544 147.535 43.2557 150.082 43.3433C152.681 43.4347 154.821 43.7022 156.066 44.0673C157.309 44.4325 157.549 44.8689 156.746 45.2771C155.941 45.6856 154.158 46.0286 151.803 46.2267C149.448 46.4244 146.701 46.4649 144.209 46.3196C141.425 46.1596 138.673 45.9901 135.955 45.8123C120.806 44.8203 106.681 43.5663 93.4688 42.1328C69.6656 39.5399 46.6773 36.5301 31.2037 32.5475C27.692 31.6362 24.5853 30.6815 21.9747 29.689C20.8493 29.2611 19.8098 28.8252 18.8905 28.3872Z' fill='%23F6E860'/%3E%3Cpath d='M57.7926 16.6232C56.4474 15.9859 55.2157 15.3353 54.1357 14.683C53.4174 14.2536 53.9462 13.8008 55.5157 13.4269C57.0876 13.0527 59.5934 12.7875 62.46 12.6906C65.3243 12.5938 68.2978 12.6733 70.7144 12.9124C73.1299 13.1515 74.8038 13.5302 75.2791 13.968C75.8918 14.5442 76.6977 15.1255 77.6629 15.6992C79.9058 17.032 83.0384 18.3409 86.8749 19.6024C103.818 25.1128 132.375 29.6762 164.217 33.1163C178.73 34.6765 193.583 36.2635 210.443 37.131C213.986 37.3129 217.575 37.4657 221.212 37.5882C224.943 37.7136 228.721 37.807 232.492 37.8645C235.348 37.9105 237.864 38.1522 239.509 38.5165C241.154 38.8812 241.787 39.3432 241.278 39.7954C240.767 40.2473 239.156 40.6487 236.808 40.9086C234.46 41.168 231.562 41.2679 228.771 41.1656C224.507 41.0124 220.273 40.8424 216.097 40.6581C212.028 40.4787 208.017 40.2867 204.032 40.0821C185.225 39.1163 166.528 37.9753 150.228 36.2256C114.571 32.3556 87.4317 26.9477 68.8995 20.9254C64.674 19.5357 60.9172 18.1033 57.7926 16.6232Z' fill='%23F6E860'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

.hero-image {
  width: 45%;
  text-align: right;
  min-width: 280px;
}

.hero-image img {
  max-width: 550px;
  width: 100%;
  height: auto;
  display: block;
}

.hero-apps {
  display: flex;
  gap: 15px;
  margin-top: 30px;
  flex-wrap: wrap;
}

.btn-app {
  background: #000;
  color: #fff;
  padding: 10px 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  text-decoration: none;
}

.btn-text {
  display: flex;
  flex-direction: column;
  margin-left: 12px;
}

.small-txt {
  color: #FFF;
  font-family: "Lufga", sans-serif;
  font-size: 13px;
  font-weight: 300;
  text-transform: uppercase;
}

.big-txt {
  font-size: 16px;
  font-weight: 600;
}

.purple-pill-icon {
  display: inline-block;
  width: 60px; /* Ajustez la largeur selon vos besoins */
  height: 26px; /* Ajustez la hauteur pour l'aligner au texte */
  vertical-align: middle;
  margin: 0 10px; /* Espace entre les mots */
  /* Utilisation du Data URL généré plus haut */
  background-image: url("data:image/svg+xml,%3Csvg width='86' height='44' viewBox='0 0 86 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5.21922' y='5.21922' width='74.967' height='33.2132' rx='16.6066' stroke='url(%23paint0_linear_26_736)' stroke-width='10.4384'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_26_736' x1='0' y1='21.8258' x2='85.4054' y2='21.8258' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2333057E'/%3E%3Cstop offset='1' stop-color='%23CFA0FF'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* -------------------- RESPONSIVE -------------------- */
@media (max-width: 991px) {
  .hero-container {
    flex-direction: column;
    text-align: center;
  }
  .hero-apps {
    justify-content: center;
  }
  .hero-image img {
    margin-top: 30px;
  }
}
@media (max-width: 480px) {
  .hero-content h1 {
    font-size: 2rem;
  }
  .btn-app {
    min-width: 140px;
    padding: 8px 12px;
  }
  .hero-text::after {
    width: 180px;
    height: 40px;
    margin-left: -2rem;
  }
}
@media (max-width: 320px) {
  .hero-content h1 {
    font-size: 1.6rem;
    line-height: 50px;
  }
  .hero-apps {
    flex-direction: column;
    gap: 10px;
  }
  .hero-text::after {
    width: 150px;
    height: 35px;
    margin-left: -1rem;
  }
  .hero-container {
    padding: 15px;
  }
}

/*# sourceMappingURL=style.css.map */