/* === GLOBAL === */
body {margin:0; font-family:'Poppins',sans-serif; background:#0a0a0a; color:#e5e5e5;}
.container {width:90%; max-width:1200px; margin:auto;}

/* HEADER */
.site-header {background:#111; padding:1rem 0; position:sticky; top:0; z-index:100;}
.header-inner {display:flex; justify-content:space-between; align-items:center;}
.logo {display:flex; align-items:center; gap:10px; text-decoration:none;}
.logo-img {height:70px; transition:0.3s;}
.logo-img:hover {transform:scale(1.15); filter:drop-shadow(0 0 18px #a855f7);}
.logo-text {color:#e5e5e5; font-weight:800; font-size:1.5rem; text-shadow:0 0 5px #a855f7,0 0 10px #9333ea;}
.main-nav ul {display:flex; gap:1.5rem; list-style:none; margin:0; padding:0;}
.main-nav a {color:#e5e5e5; text-decoration:none; transition:0.3s;}
.main-nav a.active, .main-nav a:hover {color:#a855f7; text-shadow:0 0 8px #a855f7;}
#burger {display:none; flex-direction:column; cursor:pointer; gap:5px;}
#burger span {width:25px; height:3px; background:#a855f7; border-radius:3px;}

/* HERO */
.hero {display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center; padding:5rem 0;}
.hero h1 {font-size:3rem; color:#e5e5e5; text-shadow:0 0 5px #a855f7,0 0 10px #9333ea,0 0 15px #d946ef;}
.hero p {margin-top:1rem; line-height:1.6; color:#e5e5e5;}
.hero-image img {max-width:100%; border-radius:1rem; box-shadow:0 0 25px rgba(168,85,247,0.6); transition:0.5s;}
.hero-image img:hover {transform:scale(1.08) rotate(-1.5deg); box-shadow:0 0 40px rgba(168,85,247,0.9),0 0 70px rgba(168,85,247,0.3);}

/* SECTIONS */
.section {padding:4rem 0;}
.section-title {text-align:center; margin-bottom:3rem; font-size:2rem; color:#e5e5e5; text-shadow:0 0 5px #a855f7,0 0 10px #9333ea,0 0 15px #d946ef;}
.grid {display:grid; gap:2rem;}
.grid.small-grid {grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}

/* CARTES */
.card {background:#111; padding:2rem; border-radius:1rem; text-align:center; border:1px solid rgba(168,85,247,0.2); transition:all 0.4s;}
.card:hover {transform:translateY(-8px); box-shadow:0 0 30px rgba(168,85,247,0.6),0 0 60px rgba(168,85,247,0.2); border-color:#a855f7;}
.card h3 {text-shadow:0 0 5px #a855f7,0 0 10px #9333ea,0 0 15px #d946ef; color:#e5e5e5;}
.card p, .card h4, .card .opt-price {color:#e5e5e5;}

/* BOUTONS */
.btn {display:inline-block; padding:.8rem 1.5rem; border-radius:50px; font-weight:600; transition:.3s; text-decoration:none;}
.btn.primary,.btn.cta {background:linear-gradient(90deg,#a855f7,#9333ea); color:white; box-shadow:0 0 15px rgba(168,85,247,0.7);}
.btn.primary:hover,.btn.cta:hover {transform:scale(1.12); box-shadow:0 0 40px rgba(168,85,247,1),0 0 80px rgba(168,85,247,0.5);}

/* CTA & FOOTER */
.cta {text-align:center; padding:3rem 0;}
.site-footer {background:#111; padding:3rem 0; border-top:1px solid rgba(168,85,247,0.3);}
.site-footer p {text-align:center; font-size:.9rem; color:#9ca3af;}

/* PACKS - STYLE SÉCURISÉ */
.packs-grid {display:grid; grid-template-columns:repeat(2,1fr); gap:2rem; justify-items:center;}
.packs-grid .pack {max-width:320px; background:#111; border:2px solid rgba(168,85,247,0.5); border-radius:1rem; padding:2rem; text-align:center; box-shadow:0 0 25px rgba(168,85,247,0.6); position:relative; transition:all 0.4s ease;}
.packs-grid .pack.highlight {border-color:#ff00ff; box-shadow:0 0 35px rgba(255,0,255,0.6);}
.packs-grid .pack:hover {transform:translateY(-8px); box-shadow:0 0 35px rgba(168,85,247,0.8),0 0 60px rgba(168,85,247,0.3);}
.packs-grid .pack .badge {position:absolute; top:-15px; right:15px; background:#a855f7; color:#fff; padding:.3rem .7rem; border-radius:20px; font-weight:600;}
.packs-grid .pack h3 {color:#e5e5e5; text-shadow:0 0 5px #a855f7,0 0 10px #9333ea,0 0 15px #d946ef; margin-bottom:1rem;}
.packs-grid .pack .price {color:#a855f7; font-size:1.8rem; margin:1rem 0; font-weight:700;}
.packs-grid .pack p {color:#e5e5e5; line-height:1.6;}

/* RESPONSIVE */
@media(max-width:900px){
  .header-inner{flex-direction:column;gap:.5rem;}
  .logo-img{height:55px;}
  .main-nav ul{flex-direction:column;gap:.8rem;}
  #burger{display:flex;}
  #nav-links{display:none;flex-direction:column;gap:1rem;}
  .hero{grid-template-columns:1fr;text-align:center;}
  .hero-image{margin-top:2rem;}
  .packs-grid {grid-template-columns:1fr; gap:1.5rem;}
  .packs-grid .pack {max-width:100%;}
}

.option-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 0 35px rgba(168,85,247,0.8), 0 0 60px rgba(168,85,247,0.3);
  border-color: #a855f7;
}

.option-card h4 {
  color: #e5e5e5;
  text-shadow: 0 0 5px #a855f7, 0 0 10px #9333ea, 0 0 15px #d946ef;
  margin-bottom: 1rem;
}

.option-card .opt-price {
  color: #a855f7;
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 0.5rem;
}

/* RESPONSIVE */
@media(max-width:900px){
  .options-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
.option-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 0 35px rgba(168,85,247,0.8), 0 0 60px rgba(168,85,247,0.3);
  border-color: #a855f7;
}

.option-card h4 {
  color: #e5e5e5;
  text-shadow: 0 0 5px #a855f7, 0 0 10px #9333ea, 0 0 15px #d946ef;
  margin-bottom: 1rem;
}

.option-card .opt-price {
  color: #a855f7;
  font-size: 1.5rem;
  font-weight: 700;
}
.option-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 0 35px rgba(168,85,247,0.8), 0 0 60px rgba(168,85,247,0.3);
  border-color: #a855f7;
}

.option-card h4 {
  color: #e5e5e5;
  text-shadow: 0 0 5px #a855f7, 0 0 10px #9333ea, 0 0 15px #d946ef;
  margin-bottom: 1rem;
}

.option-card .opt-price {
  color: #a855f7;
  font-size: 1.5rem;
  font-weight: 700;
}

/* Carte “Voir plus” spécifique */
.option-card.see-more {
  justify-content: center;
  align-items: center;
}

.option-card.see-more .btn {
  margin-top: 1rem;
}

/* RESPONSIVE */
@media(max-width:900px){
  .options-grid {
    grid-template-columns: 1fr; /* cartes empilées sur mobile */
    gap: 1.5rem;
  }

  .option-card { max-width: 100%; }
}

/* SERVICES GRID HARMONISÉE */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 cartes par ligne desktop */
  gap: 2rem;
  justify-items: center;
  align-items: stretch;
}

.service-card {
  background: #111;
  border: 2px solid rgba(168,85,247,0.5);
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 0 25px rgba(168,85,247,0.6);
  transition: all 0.4s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 0 35px rgba(168,85,247,0.8), 0 0 60px rgba(168,85,247,0.3);
  border-color: #a855f7;
}

.service-card h3 {
  color: #e5e5e5;
  text-shadow: 0 0 5px #a855f7, 0 0 10px #9333ea, 0 0 15px #d946ef;
  margin-bottom: 1rem;
}

.service-card p {
  color: #a0a0a0;
  line-height: 1.6;
}

/* Carte centrée pour la dernière ligne */
.service-card.last-card {
  grid-column: 1 / -1; /* prend toute la largeur de la grille */
  max-width: 220px;    /* limite la largeur pour harmoniser */
  justify-self: center; /* centre horizontalement */
}

/* RESPONSIVE */
@media(max-width:900px){
  .services-grid {
    grid-template-columns: 1fr; /* cartes empilées sur mobile */
    gap: 1.5rem;
  }

  .service-card { max-width: 100%; }
}

/* PACKS GRID */
.packs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 packs côte à côte */
  gap: 2rem;
  justify-items: center;
  align-items: stretch;
}

.pack-card {
  background: #111;
  border: 2px solid rgba(168,85,247,0.5);
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 0 25px rgba(168,85,247,0.6);
  transition: all 0.4s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pack-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 0 35px rgba(168,85,247,0.8), 0 0 60px rgba(168,85,247,0.3);
  border-color: #a855f7;
}

.pack-card.highlight {
  border: 2px solid #a855f7;
  box-shadow: 0 0 35px rgba(168,85,247,0.8);
  position: relative;
}

.pack-card .badge {
  position: absolute;
  top: -15px;
  right: 15px;
  background: #a855f7;
  color: white;
  padding: 0.3rem 0.7rem;
  border-radius: 20px;
}

.pack-card h3 {
  color: #e5e5e5;
  text-shadow: 0 0 5px #a855f7,0 0 10px #9333ea,0 0 15px #d946ef;
  margin-bottom: 1rem;
}

.pack-card .price {
  color: #a855f7;
  font-size: 1.8rem;
  font-weight: 700;
  margin: 1rem 0;
}

.pack-card p {
  color: #a0a0a0;
  line-height: 1.6;
}

/* OPTIONS GRID */
.options-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  justify-items: center;
  align-items: stretch;
}

.option-card {
  width: 100%;
  max-width: 220px;
  background: #111;
  border: 2px solid rgba(168,85,247,0.5);
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 0 25px rgba(168,85,247,0.6);
  transition: all 0.4s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.option-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 0 35px rgba(168,85,247,0.8), 0 0 60px rgba(168,85,247,0.3);
  border-color: #a855f7;
}

.option-card h4 {
  color: #e5e5e5;
  text-shadow: 0 0 5px #a855f7,0 0 10px #9333ea,0 0 15px #d946ef;
  margin-bottom: 1rem;
}

.option-card .opt-price {
  color: #a855f7;
  font-size: 1.5rem;
  font-weight: 700;
}

.option-card.see-more {
  justify-content: center;
  align-items: center;
}

.option-card.see-more .btn {
  margin-top: 1rem;
}

/* RESPONSIVE */
@media(max-width:900px){
  .packs-grid,
  .options-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .pack-card,
  .option-card {
    max-width: 100%;
  }
}


.packs-grid {
  display: flex;
  flex-wrap: wrap;        /* permet aux cartes de revenir à la ligne si écran trop petit */
  justify-content: center; /* centre les cartes et évite les trous */
  gap: 2rem;
}

.pack-card {
  background: #111;
  border: 2px solid rgba(168,85,247,0.5);
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 0 25px rgba(168,85,247,0.6);
  transition: all 0.4s ease;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  flex: 0 0 300px;  /* largeur fixe des cartes */
  min-height: 400px; /* hauteur uniforme */
}
/* FAQ section */
.faq-section {
  background: #111; /* même couleur que tes sections */
  padding: 4rem 2rem;
  border-radius: 1rem;
  box-shadow: 0 0 25px rgba(168,85,247,0.6);
}

.faq-item {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: #1a1a1a;
  border-left: 4px solid #a855f7;
  border-radius: 0.8rem;
  transition: all 0.4s ease;
}

.faq-item:hover {
  box-shadow: 0 0 30px rgba(168,85,247,0.7), 0 0 60px rgba(168,85,247,0.3);
  border-left-color: #d946ef;
  transform: translateY(-3px);
}

.faq-question {
  color: #e5e5e5;
  font-weight: 700;
  font-size: 1.2rem;
  text-shadow: 0 0 5px #a855f7,0 0 10px #9333ea,0 0 15px #d946ef;
  cursor: pointer;
  margin-bottom: 0.5rem;
}

.faq-answer {
  color: #a0a0a0;
  line-height: 1.6;
  padding-left: 0.5rem;
  border-left: 2px solid rgba(168,85,247,0.3);
}

/* Responsive */
@media(max-width:900px){
  .faq-section {
    padding: 2rem 1rem;
  }
  .faq-question {
    font-size: 1.1rem;
  }
}
/* FAQ SECTION AJUSTÉE */
.faq-section {
  background:#111;
  padding:2rem 2rem;      /* réduit le padding vertical */
  border-radius:1rem;
  box-shadow:0 0 20px rgba(168,85,247,0.5); /* un peu moins d’ombre */
  max-width:900px;        /* limite la largeur */
  margin:3rem auto;       /* centre horizontalement avec espace au-dessus et dessous */
}

.faq-item {
  margin-bottom:1rem;     /* réduit l’espacement entre les items */
  padding:1rem 1.5rem;    /* réduit le padding interne */
  background:#1a1a1a;
  border-left:4px solid #a855f7;
  border-radius:.8rem;
  cursor:pointer;
  transition:all 0.4s ease;
}

.faq-item:hover {
  box-shadow:0 0 25px rgba(168,85,247,0.6),0 0 50px rgba(168,85,247,0.2); 
  border-left-color:#d946ef;
}

.faq-question {
  font-size:1.1rem;       /* un peu plus petit */
  margin-bottom:.3rem;
}

.faq-answer {
  padding-left:.5rem;
  font-size:0.95rem;
  line-height:1.5;
}
/* Icône tarifs — taille maîtrisée */
.tarif-icon {
.tarif-icon {
  width: 60 !important;
  height: auto !important;
}

  display: block;  /* évite les espaces indésirables (utile si centré) */
  margin: 0 auto 1rem; /* centre horizontalement et espace en dessous */
}
/* Grille des services */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* garde les 3 colonnes sur grand écran */
  gap: 20px;
  padding: 0 10px; /* petit padding pour éviter que ça touche les bords */
  box-sizing: border-box;
}

/* Tablettes : 2 colonnes */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile : 1 colonne */
@media (max-width: 480px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

/* ------------------------
   SERVICES GRID - Desktop
------------------------- */
.services-grid {
  display: grid;
  grid-template-columns: 1fr; /* 1 carte par ligne */
  gap: 2rem;
  justify-items: center;
  align-items: stretch;
}

.service-card {
  background: #111;
  border: 2px solid rgba(168,85,247,0.5);
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 0 25px rgba(168,85,247,0.6);
  transition: all 0.4s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  max-width: 600px; /* largeur horizontale pour le rectangle */
  height: 200px; /* rectangle horizontal */
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 0 35px rgba(168,85,247,0.8),0 0 60px rgba(168,85,247,0.3);
  border-color: #a855f7;
}

/* ------------------------
   SERVICES GRID - Mobile
------------------------- */
@media(max-width: 768px){
  .services-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 petites cartes par ligne */
    gap: 1rem;
  }

  .service-card {
    max-width: 100px; /* carré plus petit */
    height: 100px;    /* carré */
    padding: 1rem;
  }
}

/* OPTIONS GRID */
.options-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 colonnes sur desktop */
  gap: 2rem;
  justify-items: center;
  align-items: stretch;
}

.option-card {
  width: 100%;
  max-width: 300px;       /* largeur max des cartes sur desktop */
  background: #111;
  border: 2px solid rgba(168,85,247,0.5);
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 0 25px rgba(168,85,247,0.6);
  transition: all 0.4s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.option-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 0 35px rgba(168,85,247,0.8), 0 0 60px rgba(168,85,247,0.3);
  border-color: #a855f7;
}

/* RESPONSIVE - TABLETTE */
@media(max-width: 1024px){
  .options-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 cartes par ligne */
  }
}

/* RESPONSIVE - MOBILE */
@media(max-width: 600px){
  .options-grid {
    grid-template-columns: 1fr; /* 1 carte par ligne */
    gap: 1.2rem;
  }

  .option-card {
    max-width: 100%;  /* occupe toute la largeur de l’écran */
  }
}
/* ------------------------
   SERVICES GRID - Mobile Responsive
------------------------- */
@media(max-width: 768px){
  .services-grid {
    grid-template-columns: 1fr; /* 1 rectangle par ligne */
    gap: 1rem;
  }

  .service-card {
    max-width: 95%;    /* largeur adaptée à l’écran mobile */
    height: 120px;     /* rectangle plus petit mais horizontal */
    padding: 1rem;     /* réduit le padding */
  }

  .options-grid {
    grid-template-columns: 1fr; /* 1 rectangle par ligne */
    gap: 1rem;
  }

  .option-card {
    max-width: 95%;    /* largeur adaptée à l’écran mobile */
    height: 120px;     /* rectangle horizontal plus petit */
    padding: 1rem;     /* réduit le padding */
  }
}
/* Par défaut (desktop) */
#burger {
  display: none;
}

/* Sur mobile (max-width: 900px) */
@media(max-width: 900px){
  #burger {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
  }

  #burger span {
    width: 25px;
    height: 3px;
    background: #a855f7;
    border-radius: 3px;
  }

  /* Cacher les liens par défaut */
  #nav-links {
    display: none;
    flex-direction: column;
    gap: 1rem;
  }

  /* Quand le menu est ouvert */
  #nav-links.show {
    display: flex;
  }
}
/* --- BURGER STYLE POUR FOND NOIR --- */
#burger {
  display: none; /* caché sur desktop */
  flex-direction: column;
  justify-content: space-between;
  width: 25px;
  height: 20px;
  cursor: pointer;
}

#burger span {
  display: block;
  height: 3px;
  background-color: #a855f7; /* couleur violette du site */
  border-radius: 2px;
  transition: all 0.3s ease;
}

#burger.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

#burger.open span:nth-child(2) {
  opacity: 0;
}

#burger.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* MENU MOBILE FOND NOIR */
@media (max-width: 768px) {
  .main-nav ul {
    display: none;
    flex-direction: column;
    gap: 15px;
    position: absolute;
    top: 100%;
    right: 0;
    width: 220px;
    padding: 20px;
    background-color: #000000; /* FOND NOIR */
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 1000;
  }

  .main-nav ul.show {
    display: flex;
  }

  .main-nav ul li a {
    color: #ffffff; /* texte blanc */
    text-decoration: none;
    font-weight: 600;
    padding: 8px 0;
    transition: color 0.2s ease;
  }

  .main-nav ul li a:hover,
  .main-nav ul li a.active {
    color: #a855f7; /* violet pour le lien actif ou hover */
  }

  #burger {
    display: flex;
  }
}
@media (max-width: 768px) {
  /* Burger centré */
  #burger {
    display: flex;
    margin: 0 auto; /* centre horizontalement */
    cursor: pointer;
    z-index: 1001;
  }

  /* Menu déroulant sur la droite */
  .main-nav ul {
    display: none; /* caché par défaut */
    flex-direction: column;
    gap: 15px;
    position: fixed; /* pour qu’il reste à l’écran */
    top: 60px;       /* juste sous le header */
    right: 0;        /* collé à droite */
    width: 220px;    /* largeur du menu */
    height: calc(100% - 60px); /* couvre toute la hauteur restante */
    background-color: #000; /* fond noir */
    padding: 20px;
    text-align: left;
    box-shadow: -4px 0 12px rgba(0,0,0,0.5);
    z-index: 1000;
  }

  /* Menu visible */
  .main-nav ul.show {
    display: flex;
  }

  /* Liens du menu */
  .main-nav ul li a {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    font-size: 1rem;
    padding: 10px 0;
    display: block;
  }

  .main-nav ul li a:hover,
  .main-nav ul li a.active {
    color: #a855f7; /* violet du site */
  }
}
@media (max-width: 768px) {
  /* Burger centré */
  #burger {
    display: flex;
    margin: 0 auto;
    cursor: pointer;
    z-index: 1001;
  }

  /* Menu petit carré sous le burger */
  .main-nav ul {
    display: none; /* caché par défaut */
    flex-direction: column;
    gap: 10px;
    position: absolute; /* positionné par rapport au nav */
    top: 100%;          /* juste en dessous du burger */
    left: 50%;          /* centre horizontalement par rapport au burger */
    transform: translateX(-50%); /* centre exact */
    width: 200px;       /* largeur du carré */
    height: auto;       /* hauteur adaptée au contenu */
    background-color: #000; /* fond noir */
    padding: 15px;
    border-radius: 8px; /* coins arrondis */
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
    text-align: center;
    z-index: 1000;
  }

  /* Menu visible */
  .main-nav ul.show {
    display: flex;
  }

  /* Liens dans le menu */
  .main-nav ul li a {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    padding: 8px 0;
    display: block;
  }

  .main-nav ul li a:hover,
  .main-nav ul li a.active {
    color: #a855f7; /* violet du site */
  }
}
@media (max-width: 768px) {
  #burger {
    display: flex;
    margin: 0 auto;
    cursor: pointer;
    z-index: 1001;
  }

  .main-nav ul {
    display: none;
    flex-direction: column;
    gap: 10px;
    position: absolute;
    top: 100%; /* sous le burger */
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    background-color: #000; /* fond noir du site */
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
    text-align: center;
    z-index: 1000;
  }

  .main-nav ul.show {
    display: flex;
  }

  .main-nav ul li a {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    padding: 8px 0;
    display: block;
  }

  .main-nav ul li a:hover,
  .main-nav ul li a.active {
    color: #a855f7;
  }
}
@media (max-width: 768px) {
  .options-grid {
    flex-direction: column !important; /* empile les cartes */
    gap: 1rem !important;              /* espace entre elles */
  }

  .options-grid .option-card {
    width: 100% !important;           /* chaque carte prend toute la largeur */
    text-align: center;                /* centrer le contenu */
  }
}
/* S’assure que rien ne dépasse horizontalement */
body, html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Appliquer box-sizing à tous les éléments */
*, *::before, *::after {
  box-sizing: inherit;
}

html {
  scroll-behavior: smooth;
}
form {
  margin-top: 40px;
}


@media (max-width: 768px) {
  .contact-form {
    margin-top: 40px !important;
  }
}

body {
  background: #0a0a0a;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  text-align: center;
  padding: 60px 20px;
}

.download-section {
  background: #111;
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 0 20px rgba(177, 0, 255, 0.2);
  display: inline-block;
}

.download-section h2 {
  font-size: 28px;
  color: #B100FF;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.download-section p {
  font-size: 16px;
  color: #ccc;
  margin-bottom: 25px;
}

.btn-neon {
  display: inline-block;
  background: #B100FF;
  color: white;
  padding: 14px 32px;
  border-radius: 50px;
  font-weight: 600;
  letter-spacing: 1px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 0 20px #B100FF, 0 0 40px #B100FF;
}

.btn-neon:hover {
  background: #8A2BE2;
  box-shadow: 0 0 25px #B100FF, 0 0 50px #B100FF, 0 0 100px #B100FF;
  transform: scale(1.05);
}



.lead-magnet {
  background: #111;
  padding: 4rem 2rem;
  text-align: center;
  border-top: 1px solid rgba(168,85,247,0.3);
  border-bottom: 1px solid rgba(168,85,247,0.3);
  box-shadow: 0 0 25px rgba(168,85,247,0.4);
}

.lead-magnet h2 {
  color: #e5e5e5;
  font-size: 2rem;
  margin-bottom: 1rem;
  text-shadow: 0 0 5px #a855f7, 0 0 10px #9333ea, 0 0 15px #d946ef;
}

.lead-magnet p {
  color: #a0a0a0;
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto 2rem;
  line-height: 1.6;
}

.lead-magnet .btn.primary {
  background: linear-gradient(90deg,#a855f7,#9333ea);
  color: white;
  box-shadow: 0 0 15px rgba(168,85,247,0.7);
  border-radius: 50px;
  padding: 1rem 2rem;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s;
}

.lead-magnet .btn.primary:hover {
  transform: scale(1.12);
  box-shadow: 0 0 40px rgba(168,85,247,1), 0 0 80px rgba(168,85,247,0.5);
}

.lead-magnet-inline {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(168,85,247,0.3);
  text-align: center;
}

.lead-magnet-inline h3 {
  color: #e5e5e5;
  margin-bottom: 0.5rem;
  font-size: 1.4rem;
  text-shadow: 0 0 5px #a855f7;
}

.lead-magnet-inline p {
  color: #9ca3af;
  font-size: 1rem;
  margin-bottom: 1.5rem;
}

.btn.secondary {
  background: transparent;
  color: #a855f7;
  border: 2px solid #a855f7;
  padding: 0.8rem 1.8rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s ease;
}

.btn.secondary:hover {
  background: #a855f7;
  color: #fff;
  box-shadow: 0 0 20px rgba(168,85,247,0.6);
}

.cta-double {
  text-align: center;
  padding: 4rem 2rem;
}

.cta-double h2 {
  color: #e5e5e5;
  font-size: 2rem;
  margin-bottom: 2rem;
  text-shadow: 0 0 5px #a855f7, 0 0 10px #9333ea;
}

.cta-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.btn.cta {
  background: linear-gradient(90deg, #a855f7, #9333ea);
  color: white;
  padding: 1rem 2rem;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 0 20px rgba(168,85,247,0.7);
  transition: all 0.3s ease;
  width: 260px; /* ✅ largeur fixe identique */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.btn.cta:hover {
  transform: scale(1.08);
  box-shadow: 0 0 40px rgba(168,85,247,1), 0 0 80px rgba(168,85,247,0.5);
}