/* Distinctive landing-page section treatments */
/* Kept separate so the visual rhythm is easy to tune without touching components. */
#fonctionnalites {
  background: var(--color-bg);
  overflow: hidden;
}
#fonctionnalites::before {
  content: "";
  position: absolute;
  width: 420px; height: 420px;
  left: -220px; top: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20,184,166,.13), transparent 68%);
  pointer-events: none;
}
#fonctionnalites .feature-card { background: rgba(255,255,255,.82); }

#demo {
  background: linear-gradient(135deg, #10201e 0%, #123c3a 55%, #26336f 100%);
  color: #f7faf9;
  overflow: hidden;
}
#demo::after {
  content: "";
  position: absolute; inset: 0;
  opacity: .18; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.42) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
}
#demo .section-head, #demo .steps { position: relative; z-index: 1; }
#demo .section-head p, #demo .step p { color: rgba(247,250,249,.72); }
#demo .section-head .kicker { color: #8ff5e7; background: rgba(20,184,166,.15); border-color: rgba(143,245,231,.35); }
#demo .section-head h2::after { background: linear-gradient(90deg, #8ff5e7, #fb7185); }
#demo .step { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.18); backdrop-filter: blur(8px); }

#tarifs { background: #fffaf5; }
#tarifs .section-head .kicker { color: var(--color-accent-dark); background: rgba(251,113,133,.1); border-color: rgba(225,29,72,.2); }
#tarifs .section-head h2::after { background: var(--gradient-accent); }
#tarifs .price-card { box-shadow: 0 12px 30px rgba(117,73,35,.08); }

#avis { background: linear-gradient(180deg, #eef4f3 0%, #f2efff 100%); }
#avis .testimonial-card { background: rgba(255,255,255,.9); }
#avis .section-head h2::after { background: linear-gradient(90deg, #6366f1, #fb7185); }

#faq { background: #f7faf9; }
#faq::before {
  content: "?";
  position: absolute; right: 8%; top: 42px;
  font: 800 14rem/1 var(--font-heading);
  color: rgba(20,184,166,.045);
  pointer-events: none;
}
#faq .container { position: relative; z-index: 1; }

@media (max-width: 640px) {
  #faq::before { right: -8%; font-size: 9rem; }
  #demo { background: linear-gradient(160deg, #10201e, #26336f); }
}