:root{
    --fs-dark: #0b1220;
    --fs-dark-2: #111a2e;

    --fs-light: #f6f7fb;
    --fs-light-2: #ffffff;
    --fs-muted: rgba(255,255,255,.80);

    --fs-accent: #4da3ff;
    --fs-accent-2: #7c5cff;

    --fs-ink: rgba(11,18,32,.92);
    --fs-ink-muted: rgba(11,18,32,.72);
    --fs-border: rgba(11,18,32,.12);
    --fs-border-2: rgba(11,18,32,.09);

    --fs-focus: rgba(77,163,255,.45);

    --shadow: 0 14px 38px rgba(11,18,32,.08);
    --shadow-2: 0 18px 46px rgba(11,18,32,.10);
    --radius: 18px;
    --radius-2: 22px;
  }
  /* Hero badge: descendre + rendre lisible sur fond sombre */
.hero-badge-wrap{
  margin-top: 18px; /* ajuste à 12/24 si tu veux */
}

/* Forcer lisibilité du badge uniquement dans le hero (parallax) */
.parallax .badge.badge-soft,
.parallax .badge.badge-hero{
  color: #ffffff !important;
  background: rgba(255,255,255,.28) !important;  /* augmente si besoin: .35 */
  border: 1px solid rgba(255,255,255,.35) !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.55) !important;
}


/* Optionnel: un peu plus bas sur mobile si besoin */
@media (max-width: 991.98px){
  .hero-badge-wrap{ margin-top: 26px; }
}


  html { scroll-behavior: smooth; }
  @@media (prefers-reduced-motion: reduce){
    html { scroll-behavior: auto; }
    .parallax{ background-attachment: scroll !important; }
    *{ transition: none !important; animation: none !important; }
  }

  body{
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--fs-ink);
    background:
      radial-gradient(1200px 650px at 15% 0%, rgba(77,163,255,.10), transparent 55%),
      radial-gradient(900px 520px at 85% 10%, rgba(124,92,255,.08), transparent 52%),
      linear-gradient(180deg, var(--fs-light), #ffffff 55%, #f7f9ff 100%);
  }

  a:focus-visible, button:focus-visible{
    outline: 3px solid var(--fs-focus);
    outline-offset: 3px;
    border-radius: 10px;
  }

  .skip-link{
    position: absolute;
    left: 12px;
    top: 12px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid var(--fs-border);
    border-radius: 12px;
    box-shadow: 0 10px 22px rgba(2,6,23,.10);
    color: var(--fs-ink);
    text-decoration: none;
    transform: translateY(-140%);
    transition: transform .2s ease;
    z-index: 1200;
  }
  .skip-link:focus{ transform: translateY(0); }

  .topbar{
    background: linear-gradient(90deg, rgba(77,163,255,.16), rgba(124,92,255,.12));
    border-bottom: 1px solid rgba(11,18,32,.08);
    font-size: .92rem;
    color: rgba(11,18,32,.78);
  }
  .topbar .wrap{
    padding: 8px 0;
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }
  .topbar .pill{
    border: 1px solid rgba(11,18,32,.10);
    background: rgba(255,255,255,.55);
    border-radius: 999px;
    padding: 6px 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .dot{
    width: 8px; height: 8px;
    border-radius: 99px;
    background: linear-gradient(135deg, var(--fs-accent), var(--fs-accent-2));
    box-shadow: 0 0 0 4px rgba(77,163,255,.12);
    flex: 0 0 auto;
  }

  .navbar{
    background: rgba(11, 18, 32, .92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .nav-link, .navbar-brand{ color: rgba(255,255,255,.92) !important; }
  .nav-link:hover{ color:#fff !important; }
  .nav-link.active{
    color:#fff !important;
    text-decoration: underline;
    text-underline-offset: .35rem;
  }

  .btn-accent{
    background: var(--fs-accent);
    border-color: var(--fs-accent);
    color: #06101f;
    font-weight: 650;
    border-radius: 999px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .btn-accent:hover{
    background: #2c90ff;
    border-color: #2c90ff;
    color: #06101f;
  }
  .btn-soft{
    border-radius: 999px;
    padding-left: 16px;
    padding-right: 16px;
    font-weight: 650;
    border: 1px solid rgba(255,255,255,.26);
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.92);
  }
  .btn-soft:hover{
    background: rgba(255,255,255,.16);
    color: #ffffff;
    border-color: rgba(255,255,255,.34);
  }

  .parallax{
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 76vh;
    display: flex;
    align-items: center;
    color: #fff;
  }
  .parallax::before{
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(900px 520px at 20% 20%, rgba(60, 86, 114, 0.16), transparent 60%),
      radial-gradient(900px 520px at 85% 25%, rgba(124,92,255,.10), transparent 62%),
      linear-gradient(120deg, rgba(11,18,32,.94), rgba(17,26,46,.88));
  }
  .parallax h1,
  .parallax .lead,
  .parallax .badge,
  .parallax .kpi,
  .parallax .btn{
    text-shadow: 0 2px 18px rgba(0,0,0,.45);
  }
  .parallax .content{ position: relative; z-index: 1; }

  .section{ padding: 88px 0; }
  .anchor{ scroll-margin-top: 92px; }

  .card-soft{
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    background: var(--fs-light-2);
  }
  .badge-soft{
    background: rgba(77,163,255,.14);
    color: #0b3a66;
    border: 1px solid rgba(77,163,255,.28);
    font-weight: 650;
  }
  .divider{
    height: 1px;
    background: var(--fs-border);
    margin: 26px 0;
  }
  .muted{ color: var(--fs-ink-muted); }
  .hero-max{ max-width: 1040px; }

  .hero-kpis{
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 12px;
    margin-top: 18px;
  }
  .kpi{
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.10);
    padding: 12px 12px;
    box-shadow: 0 16px 35px rgba(2,6,23,.12);
  }
  .kpi .t{ font-weight: 750; font-size: 1.0rem; line-height: 1.2; }
  .kpi .d{ color: rgba(255,255,255,.80); font-size: .94rem; line-height: 1.45; margin-top: 4px; }

  .hero-panel{
    border-radius: var(--radius-2);
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.10);
    box-shadow: 0 18px 55px rgba(2,6,23,.22);
    overflow: hidden;
  }
  .hero-panel .top{
    display:flex;
    align-items:center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
  }
  .traffic{ display:flex; gap:8px; align-items:center; }
  .traffic span{ width:10px; height:10px; border-radius: 50%; display:inline-block; }
  .traffic .r{ background:#ff5f57; }
  .traffic .y{ background:#febc2e; }
  .traffic .g{ background:#28c840; }
  .hero-panel .label{
    font-size: .92rem;
    color: rgba(255,255,255,.85);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    padding: 6px 10px;
    background: rgba(255,255,255,.08);
    white-space: nowrap;
  }
  .hero-panel .body{ padding: 16px; }
  .rowline{
    display:flex; align-items:center; justify-content: space-between;
    gap: 10px;
    color: rgba(255,255,255,.88);
    font-size: .95rem;
    margin-bottom: 10px;
  }
  .rowline .pill-mini{
    font-size: .84rem;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.86);
  }
  .bar{
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    overflow:hidden;
    margin: 6px 0 14px;
  }
  .bar i{
    display:block;
    height:100%;
    background: linear-gradient(90deg, rgba(77,163,255,1), rgba(124,92,255,1));
  }
  .hero-panel .hint{
    color: rgba(255,255,255,.78);
    font-size: .95rem;
    line-height: 1.55;
    margin-top: 6px;
  }

  .icon-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid rgba(11,18,32,.10);
    background: rgba(255,255,255,.65);
    box-shadow: 0 10px 22px rgba(2,6,23,.06);
    color: rgba(11,18,32,.86);
    font-size: .95rem;
  }

  .callout{
    border-radius: var(--radius-2);
    background:
      radial-gradient(900px 300px at 20% 0%, rgba(77,163,255,.12), transparent 60%),
      radial-gradient(900px 300px at 85% 15%, rgba(124,92,255,.10), transparent 62%),
      #ffffff;
    border: 1px solid rgba(11,18,32,.10);
    box-shadow: var(--shadow-2);
    padding: 22px;
  }

  .pricing{
    border: 1px solid rgba(11,18,32,.10);
    border-radius: var(--radius);
    background: #ffffff;
    box-shadow: var(--shadow);
    padding: 22px;
    height: 100%;
  }
  .pricing .tag{
    display:inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(11,18,32,.10);
    background: rgba(11,18,32,.03);
    color: rgba(11,18,32,.86);
    font-weight: 650;
    font-size: .92rem;
  }
  .pricing .price{
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    margin: 10px 0 10px;
    color: rgba(11,18,32,.92);
  }
  .pricing ul{
    padding-left: 1.1rem;
    margin: 0;
    color: rgba(11,18,32,.78);
    line-height: 1.75;
  }
  .pricing p{
    color: rgba(11,18,32,.72);
    line-height: 1.75;
    margin-top: 12px;
    margin-bottom: 0;
  }

  .soft-bg{
    background:
      radial-gradient(1000px 420px at 20% 20%, rgba(77,163,255,.10), transparent 60%),
      radial-gradient(900px 420px at 85% 25%, rgba(124,92,255,.08), transparent 62%),
      linear-gradient(180deg, #ffffff, #f7f9ff);
    border-top: 1px solid rgba(11,18,32,.07);
    border-bottom: 1px solid rgba(11,18,32,.07);
  }

  .accordion .accordion-item{
    border: 1px solid var(--fs-border-2);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: 0 10px 22px rgba(2,6,23,.06);
  }
  .accordion-button{ font-weight: 700; }
  .accordion-button:not(.collapsed){
    background: rgba(77,163,255,.10);
    color: rgba(11,18,32,.92);
    box-shadow: none;
  }
  .accordion-body{
    color: rgba(11,18,32,.80);
    line-height: 1.7;
  }

  footer{
    background: var(--fs-dark);
    color: rgba(255,255,255,.85);
  }
  footer a{
    color: rgba(255,255,255,.85);
    text-decoration: none;
  }
  footer a:hover{
    color: #ffffff;
    text-decoration: underline;
  }

  .sticky-cta{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(11,18,32,.10);
    padding: 10px 12px;
    z-index: 1050;
    display: none;
  }
  .sticky-cta .inner{
    display:flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    max-width: 980px;
    margin: 0 auto;
  }
  .sticky-cta .txt{
    color: rgba(11,18,32,.78);
    font-size: .95rem;
    line-height: 1.35;
  }

  @@media (max-width: 991.98px){
    .parallax{ background-attachment: scroll; min-height: 72vh; }
    .hero-kpis{ grid-template-columns: 1fr; }
    .sticky-cta{ display: block; }
    main{ padding-bottom: 74px; }
  }