/* ===== RESET ===== */

*,

*::before,

*::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}

html,

body {

  height: 100%;

}

body {

  font-family: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont,

    "Segoe UI", sans-serif;

  background: radial-gradient(circle at top, #1b1d24 0, #050608 55%, #020203 100%);

  color: #f5f5f7;

  -webkit-font-smoothing: antialiased;

}

img {

  max-width: 100%;

  display: block;

}

/* ===== LAYOUT ===== */

.page-wrapper {

  min-height: 100vh;

  color: #f5f5f7;

}

.section {

  padding: 96px 20px;

}

.section-narrow {

  padding: 72px 20px;

}

.section-header {

  max-width: 720px;

  margin: 0 auto 40px;

  text-align: left;

}

.section-header h2 {

  font-size: 2rem;

  margin-bottom: 12px;

}

.section-header p {

  color: #a0a4b0;

  font-size: 0.98rem;

}

/* ===== NAVBAR ===== */

.top-nav {

  position: sticky;

  top: 0;

  z-index: 40;

  backdrop-filter: blur(24px);

  background: radial-gradient(circle at top left, #22252f 0, rgba(3, 4, 7, 0.96) 55%, rgba(3, 4, 7, 0.98) 100%);

  border-bottom: 1px solid rgba(255, 255, 255, 0.04);

}

.nav-inner {

  max-width: 1160px;

  margin: 0 auto;

  padding: 12px 20px;

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.brand {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  text-decoration: none;

}

.logo-icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: linear-gradient(135deg, #d9d9d9, #b3b3b3, #8a8a8a);
  color: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.6),
    inset 0 -2px 4px rgba(0,0,0,0.4),
    0 4px 12px rgba(0,0,0,0.4);
}

.logo-text {
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #d1d5db; /* AGENT gris clair premium */
}


.logo-text span {
  font-weight: 900;
  font-size: 1.25rem; /* X plus grand */
  margin-left: 0.25rem;
  
  background: linear-gradient(
      135deg,
      #ffffff 0%,
      #d7d7d7 20%,
      #8f8f8f 40%,
      #eaeaea 60%,
      #6b6b6b 80%,
      #ffffff 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* ombres plus nettes → plus de flou ! */
  text-shadow:
      0 0 2px rgba(255,255,255,0.4),
      0 0 4px rgba(150,150,150,0.4);
}

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 
      0 0 6px rgba(255,255,255,0.35),
      0 0 12px rgba(255,255,255,0.25);
}

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 
      0 0 6px rgba(255,255,255,0.35),
      0 0 12px rgba(255,255,255,0.25);
}


/* NAV LINKS */

.main-nav {

  display: flex;

  align-items: center;

}

.nav-links {

  display: flex;

  list-style: none;

  gap: 22px;

}

.nav-link {

  color: #d6d7dd;

  text-decoration: none;

  font-size: 0.9rem;

  padding: 6px 10px;

  border-radius: 999px;

  transition: color 0.2s ease, background 0.2s ease;

}

.nav-link:hover {

  color: #ffffff;

  background: rgba(148, 163, 184, 0.18);

}

.nav-link.active {

  background: linear-gradient(135deg, #4ade80, #22c55e);

  color: #030712;

}

/* Mobile menu */

.menu-toggle {

  display: none;

  flex-direction: column;

  gap: 5px;

  background: none;

  border: none;

  cursor: pointer;

}

.menu-toggle span {

  width: 20px;

  height: 2px;

  border-radius: 999px;

  background: #e5e7eb;

}

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

.hero {

  position: relative;

  padding: 120px 20px 80px;

  overflow: hidden;

}

.hero-inner {

  max-width: 1160px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);

  gap: 56px;

  align-items: center;

  position: relative;

  z-index: 1;

}

.hero-pill {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 6px 14px;

  border-radius: 999px;

  font-size: 0.78rem;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  border: 1px solid rgba(148, 163, 184, 0.35);

  color: #cbd5f5;

  background: radial-gradient(circle at top left, rgba(148, 163, 184, 0.32), transparent 60%);

  margin-bottom: 18px;

}

.hero h1 {

  font-size: clamp(2.25rem, 3vw + 1.4rem, 3.2rem);

  line-height: 1.1;

  margin-bottom: 18px;

}

.hero h1 .accent {

  color: #4ade80;

}

.hero-subtitle {

  color: #a0a4b0;

  max-width: 520px;

  font-size: 0.98rem;

  margin-bottom: 22px;

}

.hero-cta-row {

  display: flex;

  gap: 14px;

  margin-bottom: 20px;

}

.hero-bullets {

  list-style: none;

  color: #8e93a4;

  font-size: 0.9rem;

}

.hero-bullets li {

  display: flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 6px;

}

.hero-bullets li::before {

  content: "";

  width: 5px;

  height: 5px;

  border-radius: 999px;

  background: #4ade80;

}

/* HERO VISUAL */

.hero-visual {

  display: flex;

  justify-content: flex-end;

}

.hero-image-card {

  position: relative;

  border-radius: 28px;

  padding: 10px;

  background: radial-gradient(circle at top left, #1e293b, #020617);

  border: 1px solid rgba(148, 163, 184, 0.22);

  box-shadow:

    0 26px 60px rgba(0, 0, 0, 0.9),

    0 0 0 1px rgba(15, 23, 42, 0.7);

  max-width: 420px;

  width: 100%;

  aspect-ratio: 4 / 5;

  overflow: hidden;

}

.hero-image-card img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  border-radius: 22px;

}

.hero-glow {

  position: absolute;

  inset: 16%;

  border-radius: 32px;

  background: radial-gradient(circle at 20% 0, rgba(96, 165, 250, 0.25), transparent 60%),

              radial-gradient(circle at 80% 100%, rgba(52, 211, 153, 0.35), transparent 60%);

  opacity: 0.5;

  filter: blur(30px);

  pointer-events: none;

}

/* Particules canvas */

#heroParticles {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  z-index: 0;

  pointer-events: none;

}

/* ===== BUTTONS ===== */

.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border-radius: 999px;

  padding: 10px 18px;

  font-size: 0.9rem;

  font-weight: 500;

  text-decoration: none;

  border: 1px solid transparent;

  cursor: pointer;

  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease,

    border-color 0.14s ease, color 0.14s ease;

}

.btn-primary {

  background: linear-gradient(135deg, #22c55e, #4ade80);

  color: #020617;

  box-shadow: 0 16px 40px rgba(34, 197, 94, 0.35);

}

.btn-primary:hover {

  transform: translateY(-1px);

  box-shadow: 0 20px 50px rgba(34, 197, 94, 0.45);

}

.btn-ghost {

  background: transparent;

  color: #e5e7eb;

  border-color: rgba(148, 163, 184, 0.45);

}

.btn-ghost:hover {

  background: rgba(15, 23, 42, 0.9);

}

.btn-secondary {

  background: #111827;

  border-color: rgba(148, 163, 184, 0.5);

  color: #e5e7eb;

}

.btn-secondary:hover {

  background: #020617;

}

.btn-outline {

  background: transparent;

  border-color: rgba(148, 163, 184, 0.4);

  color: #e5e7eb;

}

.btn-outline:hover {

  background: #020617;

}

.btn-full {

  width: 100%;

}

/* ===== ABOUT / WHY ===== */

.about-grid,

.why-grid,

.solutions-grid {

  max-width: 1160px;

  margin: 0 auto;

  display: grid;

  gap: 18px;

}

.about-grid {

  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

}

.about-card,

.why-card,

.solution-card {

  background: radial-gradient(circle at top left, rgba(31, 41, 55, 0.9), rgba(15, 23, 42, 0.96));

  border-radius: 18px;

  padding: 18px 18px 20px;

  border: 1px solid rgba(148, 163, 184, 0.22);

  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);

}

.about-card h3,

.why-card h3,

.solution-card h3 {

  font-size: 1rem;

  margin-bottom: 8px;

}

.about-card p,

.why-card p,

.solution-card p {

  font-size: 0.9rem;

  color: #a0a4b0;

}

/* ===== SOLUTIONS ===== */

.solutions-grid {

  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

}

.bullet-list {

  list-style: none;

  margin-top: 10px;

}

.bullet-list li {

  position: relative;

  padding-left: 14px;

  margin-bottom: 4px;

  color: #a0a4b0;

  font-size: 0.9rem;

}

.bullet-list li::before {

  content: "";

  position: absolute;

  left: 0;

  top: 0.55em;

  width: 4px;

  height: 4px;

  border-radius: 999px;

  background: #4ade80;

}

.badge-soon {

  display: inline-flex;

  margin-top: 10px;

  padding: 4px 10px;

  border-radius: 999px;

  font-size: 0.78rem;

  background: rgba(34, 197, 94, 0.12);

  color: #bbf7d0;

}

/* ===== SPLIT LAYOUT ===== */

.split-layout {

  max-width: 1160px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);

  gap: 40px;

  align-items: center;

}

.split-layout.reverse {

  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);

}

.split-text h3 {

  font-size: 1.3rem;

  margin-bottom: 10px;

}

.split-text p {

  color: #a0a4b0;

  font-size: 0.94rem;

  margin-bottom: 12px;

}

.split-image img {

  width: 100%;

  border-radius: 22px;

  border: 1px solid rgba(148, 163, 184, 0.22);

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9);

  object-fit: cover;

}

/* ===== EXAMPLES (CALL + WHATSAPP) ===== */

.examples-grid {

  max-width: 1160px;

  margin: 0 auto;

  display: grid;

  gap: 24px;

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

}

.example-box {

  background: radial-gradient(circle at top left, rgba(31, 41, 55, 0.92), rgba(15, 23, 42, 0.98));

  border-radius: 18px;

  border: 1px solid rgba(148, 163, 184, 0.28);

  padding: 18px 18px 20px;

  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.75);

}

.example-box h3 {

  font-size: 1rem;

  margin-bottom: 10px;

}

.call-timeline {

  margin-top: 6px;

  margin-bottom: 12px;

}

.call-item {

  font-size: 0.9rem;

  color: #d1d5db;

  margin-bottom: 4px;

}

.call-item .msg-time {

  color: #9ca3af;

  font-size: 0.78rem;

  margin-right: 4px;

}

.call-summary {

  border-left: 2px solid #4ade80;

  padding-left: 8px;

}

.example-footnote {

  font-size: 0.8rem;

  color: #9ca3af;

}

/* WhatsApp style chat */

.chat-preview {

  margin-top: 10px;

  padding: 10px;

  border-radius: 16px;

  background: radial-gradient(circle at top left, #111827, #020617);

  border: 1px solid rgba(55, 65, 81, 0.8);

}

.chat-bubble {

  max-width: 90%;

  margin-bottom: 8px;

  padding: 8px 11px;

  border-radius: 16px;

  font-size: 0.86rem;

  line-height: 1.4;

  position: relative;

}

.chat-meta {

  font-size: 0.7rem;

  opacity: 0.8;

  margin-bottom: 2px;

}

.row-left {

  align-self: flex-start;

  background: #111827;

  color: #f9fafb;

  border-bottom-left-radius: 4px;

}

.row-right {

  margin-left: auto;

  background: #22c55e;

  color: #022c22;

  border-bottom-right-radius: 4px;

}

/* ===== DASHBOARD ===== */

.pill-dashboard {

  display: inline-flex;

  padding: 4px 12px;

  border-radius: 999px;

  margin-top: 10px;

  font-size: 0.8rem;

  background: rgba(148, 163, 184, 0.16);

  color: #e5e7eb;

}

.dashboard-layout {

  max-width: 1160px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);

  gap: 40px;

  align-items: center;

}

.dashboard-image img {

  width: 100%;

  border-radius: 22px;

  border: 1px solid rgba(148, 163, 184, 0.22);

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9);

}

/* ===== PRICING ===== */

.section-pricing {

  background: radial-gradient(circle at top, #0f172a 0, #020617 70%);

}

.pricing-grid {

  max-width: 1160px;

  margin: 0 auto;

  display: grid;

  gap: 22px;

  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

}

.price-card {

  background: radial-gradient(circle at top left, rgba(31, 41, 55, 0.95), rgba(15, 23, 42, 0.98));

  border-radius: 20px;

  padding: 18px 18px 22px;

  border: 1px solid rgba(148, 163, 184, 0.3);

  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.8);

  display: flex;

  flex-direction: column;

  gap: 10px;

}

.price-card h3 {

  font-size: 1.1rem;

}

.price-card .price {

  font-size: 1.4rem;

  font-weight: 600;

}

.price-card .price span {

  font-size: 0.85rem;

  color: #9ca3af;

}

.price-card ul {

  list-style: none;

  font-size: 0.9rem;

  color: #d1d5db;

  margin: 6px 0 10px;

}

.price-card ul li {

  margin-bottom: 4px;

}

.price-card--highlight {

  border-color: rgba(74, 222, 128, 0.9);

  box-shadow:

    0 30px 90px rgba(34, 197, 94, 0.3),

    0 0 0 1px rgba(15, 23, 42, 0.4);

  position: relative;

  overflow: hidden;

}

.price-card--highlight::before {

  content: "";

  position: absolute;

  inset: -40%;

  background: conic-gradient(from 0deg, rgba(22, 163, 74, 0.05), transparent 40%, rgba(59, 130, 246, 0.05), transparent 70%);

  opacity: 0.9;

  filter: blur(28px);

  pointer-events: none;

}

.pill {

  display: inline-flex;

  padding: 4px 10px;

  border-radius: 999px;

  font-size: 0.72rem;

  text-transform: uppercase;

  letter-spacing: 0.08em;

}

.pill-popular {

  background: rgba(34, 197, 94, 0.14);

  color: #bbf7d0;

}

.pill-corporate {

  background: rgba(59, 130, 246, 0.14);

  color: #bfdbfe;

}

/* ===== TESTIMONIALS ===== */

.testimonials {

  background: radial-gradient(circle at top left, #020617 0, #020617 40%, #020617 100%);

}

.testimonials-layout {

  max-width: 1160px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);

  gap: 36px;

  align-items: center;

}

.testimonial-grid {

  display: grid;

  gap: 14px;

  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));

}

.testimonial-card {

  background: radial-gradient(circle at top left, rgba(31, 41, 55, 0.9), rgba(15, 23, 42, 0.98));

  border-radius: 16px;

  padding: 14px 14px 16px;

  border: 1px solid rgba(148, 163, 184, 0.28);

  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7);

}

.stars {

  color: #facc15;

  margin-bottom: 6px;

  font-size: 0.9rem;

}

.quote {

  font-size: 0.9rem;

  color: #e5e7eb;

  margin-bottom: 4px;

}

.author {

  font-size: 0.8rem;

  color: #9ca3af;

}

.testimonials-image img {

  width: 100%;

  border-radius: 24px;

  border: 1px solid rgba(148, 163, 184, 0.26);

  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.9);

}

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

.contact-layout {

  max-width: 960px;

  margin: 0 auto;

  display: grid;

  gap: 32px;

  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);

  align-items: flex-start;

}

.contact-intro h2 {

  font-size: 1.6rem;

  margin-bottom: 8px;

}

.contact-intro p {

  color: #a0a4b0;

  font-size: 0.95rem;

}

.contact-mail a {

  color: #e5e7eb;

  text-decoration: none;

}

.contact-mail a:hover {

  text-decoration: underline;

}

.contact-form {

  background: radial-gradient(circle at top left, rgba(31, 41, 55, 0.95), rgba(15, 23, 42, 0.98));

  border-radius: 20px;

  padding: 18px 18px 22px;

  border: 1px solid rgba(148, 163, 184, 0.3);

  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.85);

}

.form-row {

  margin-bottom: 12px;

}

.form-row label {

  font-size: 0.86rem;

  display: block;

  color: #e5e7eb;

  margin-bottom: 4px;

}

input,

textarea,

select {

  width: 100%;

  border-radius: 10px;

  border: 1px solid rgba(75, 85, 99, 0.9);

  padding: 8px 10px;

  background: #020617;

  color: #f5f5f7;

  font-family: inherit;

  font-size: 0.9rem;

  outline: none;

  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;

}

input:focus,

textarea:focus,

select:focus {

  border-color: #4ade80;

  box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.5);

  background: #020617;

}

textarea {

  resize: vertical;

  min-height: 110px;

}

.form-success {

  margin-top: 10px;

  font-size: 0.86rem;

  color: #4ade80;

}

/* ===== FOOTER ===== */

.footer {

  border-top: 1px solid rgba(31, 41, 55, 0.8);

  padding: 18px 20px 28px;

  font-size: 0.8rem;

  color: #6b7280;

  text-align: center;

}

/* ===== FADE-IN ANIMATION ===== */

.fade-in-section {

  opacity: 0;

  transform: translateY(14px);

  transition: opacity 0.6s ease, transform 0.6s ease;

}

.fade-in-section.is-visible {

  opacity: 1;

  transform: translateY(0);

}

/* ===== RESPONSIVE ===== */

@media (max-width: 900px) {

  .hero-inner {

    grid-template-columns: minmax(0, 1fr);

    gap: 40px;

  }

  .hero-visual {

    justify-content: center;

  }

  .split-layout,

  .split-layout.reverse,

  .dashboard-layout,

  .testimonials-layout,

  .contact-layout {

    grid-template-columns: minmax(0, 1fr);

  }

  .split-layout.reverse .split-image {

    order: -1;

  }

  .nav-links {

    position: absolute;

    top: 60px;

    right: 12px;

    background: rgba(3, 7, 18, 0.98);

    border-radius: 16px;

    padding: 10px 12px;

    flex-direction: column;

    gap: 6px;

    border: 1px solid rgba(55, 65, 81, 0.9);

    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.9);

    display: none;

  }

  .nav-links.open {

    display: flex;

  }

  .menu-toggle {

    display: flex;

  }

}

@media (max-width: 640px) {

  .section {

    padding: 72px 16px;

  }

  .section-narrow {

    padding: 60px 16px;

  }

  .hero {

    padding: 104px 16px 64px;

  }

  .hero-cta-row {

    flex-direction: column;

    align-items: stretch;

  }

  .hero-bullets {

    font-size: 0.88rem;

  }

  .hero-image-card {

    max-width: 360px;

  }

  .pricing-grid {

    gap: 16px;

  }

}/* ==== FOOTER ==== */

.footer {
  background: #0b0c10;
  padding: 60px 20px 30px;
  margin-top: 80px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: #d3d7e4;
  font-size: 15px;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto 40px;
}

.footer-logo {
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
}

.footer-logo-icon {
  background: linear-gradient(135deg, #00ff9d, #00c26e);
  color: #000;
  font-weight: 800;
  padding: 8px 12px;
  border-radius: 6px;
}

.footer-tagline {
  margin-top: 12px;
  color: #8f94a6;
  line-height: 1.5;
}

.footer-title {
  font-weight: 600;
  margin-bottom: 12px;
  color: #fff;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 8px;
}

.footer-links a {
  text-decoration: none;
  color: #9aa0b3;
  transition: 0.2s;
}

.footer-links a:hover {
  color: #00ff9d;
}

.footer-bottom {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  color: #8f94a6;
  font-size: 14px;
}


/* ===== LAYOUT ===== */

.page-wrapper {
  min-height: 100vh;
  color: #f5f5f7;
}

.section {
  padding: 96px 20px;
}

.section-narrow {
  padding: 72px 20px;
}

.section-header {
  max-width: 720px;
  margin: 0 auto 40px;
  text-align: left;
}

.section-header h2 {
  font-size: 2rem;
  margin-bottom: 12px;
}

.section-header p {
  color: #a0a4b0;
  font-size: 0.98rem;
}

/* ===== NAVBAR ===== */

.top-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(24px);
  background: radial-gradient(circle at top left, #22252f 0, rgba(3, 4, 7, 0.96) 55%, rgba(3, 4, 7, 0.98) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.nav-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.logo-icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: linear-gradient(135deg, #d9d9d9, #b3b3b3, #8a8a8a);
  color: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.6), inset 0 -2px 4px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.4);
}

.logo-text {
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #d1d5db;
}

.logo-text span {
  font-weight: 900;
  font-size: 1.25rem;
  margin-left: 0.25rem;
  background: linear-gradient(135deg,#ffffff 0%,#d7d7d7 20%,#8f8f8f 40%,#eaeaea 60%,#6b6b6b 80%,#ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 2px rgba(255,255,255,0.4), 0 0 4px rgba(150,150,150,0.4);
}

/* NAV LINKS */

.main-nav {
  display: flex;
  align-items: center;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 22px;
}

.nav-link {
  color: #d6d7dd;
  text-decoration: none;
  font-size: 0.9rem;
  padding: 6px 10px;
  border-radius: 999px;
  transition: color 0.2s ease, background 0.2s ease;
}

.nav-link:hover {
  color: #ffffff;
  background: rgba(148, 163, 184, 0.18);
}

.nav-link.active {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: #030712;
}

/* MOBILE MENU */

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
}

.menu-toggle span {
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: #e5e7eb;
}

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

.hero {
  position: relative;
  padding: 120px 20px 80px;
  overflow: hidden;
}

.hero-inner {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #cbd5f5;
  background: radial-gradient(circle at top left, rgba(148, 163, 184, 0.32), transparent 60%);
  margin-bottom: 18px;
}

.hero h1 {
  font-size: clamp(2.25rem, 3vw + 1.4rem, 3.2rem);
  line-height: 1.1;
  margin-bottom: 18px;
}

.hero h1 .accent {
  color: #4ade80;
}

/* ( … LE RESTE DE TON CSS CONTINUE ICI SANS CHANGEMENT … ) */

/* ===== FOOTER ===== */

.footer {
  background: #0b0c10;
  padding: 60px 20px 30px;
  margin-top: 80px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: #d3d7e4;
  font-size: 15px;
}

.footer-bottom {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  color: #8f94a6;
  font-size: 14px;
}




/* ===== WHATSAPP BUTTON SOUS LE FORMULAIRE ===== */
.contact-whatsapp {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: -5px;
  margin-right: -18px; /* ← décalage vers la droite */
}

.contact-whatsapp img {
  width: 58px;
  height: 58px;
  cursor: pointer;
  transition: transform 0.2s ease;

  max-width: none !important;
  display: inline-block !important;
}