/* ==========================================================================
   Systomap — page produit SOLVIO
   ========================================================================== */

.sv{
  --sv-ink:#08091C; --sv-ink2:#12142D; --sv-ink3:#20223F;
  --sv-rule:#2C2F4A; --sv-muted:#595C72; --sv-dim:#9B9DAE;
  --sv-line:#E3E4EB; --sv-paper:#F5F6FC; --sv-white:#FDFDFF;
  --sv-deep:#41409F; --sv-brand:#5E60CD; --sv-lift:#8A92FC; --sv-soft:#CAD1FF;
  --sv-ok:#1E7F5C; --sv-ok-d:#5FD3A6;
  --sv-e:cubic-bezier(.16,1,.3,1);
}
.sv *,.sv *::before,.sv *::after{box-sizing:border-box}
.sv__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sv__wrap{max-width:1440px;margin:0 auto;width:100%}

/* ---------------------------------------------------------------- HERO */
.sv__hero{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--sv-ink);color:var(--sv-paper);
  padding:clamp(140px,17vh,210px) clamp(20px,5vw,72px) clamp(56px,7vh,90px);
}
.sv__hero::before{
  content:"";position:absolute;inset:-30% -10% auto -10%;height:130%;z-index:0;
  background:radial-gradient(58% 58% at 24% 40%,rgba(65,64,159,.62),transparent 68%),
             radial-gradient(48% 48% at 84% 8%,rgba(94,96,205,.32),transparent 70%);
  filter:blur(30px);
}
.sv__hero > *{position:relative;z-index:1}
.sv__hgrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,4vw,64px);align-items:center}

.sv__badge{
  display:inline-flex;align-items:center;gap:9px;margin:0 0 22px;
  padding:8px 16px;border-radius:99px;border:1px solid var(--sv-rule);
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--sv-lift);
}
.sv__badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sv-ok-d);
  animation:sv-pulse 2.6s var(--sv-e) infinite}
@keyframes sv-pulse{0%{box-shadow:0 0 0 0 currentColor;opacity:1}70%,100%{box-shadow:0 0 0 8px transparent;opacity:.6}}

.sv__h1{margin:0 0 20px;font-size:clamp(2.3rem,5vw,4.1rem);line-height:1.0;
  letter-spacing:-.04em;font-weight:700;color:var(--sv-white)}
.sv__h1 em{font-style:normal;color:var(--sv-lift)}
.sv__lede{margin:0 0 30px;max-width:54ch;font-size:clamp(1rem,1.15vw,1.14rem);
  line-height:1.62;color:var(--sv-dim)}

.sv__cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
.sv__btn{display:inline-flex;align-items:center;gap:10px;position:relative;overflow:hidden;
  padding:16px 30px;border-radius:99px;font-size:15px;font-weight:600;text-decoration:none;line-height:1;
  transition:transform .5s var(--sv-e),box-shadow .5s var(--sv-e),background-color .3s var(--sv-e),border-color .3s var(--sv-e)}
.sv__btn--p{background:var(--sv-brand);color:#fff;border:1px solid var(--sv-brand)}
.sv__btn--p:hover{background:var(--sv-lift);color:var(--sv-ink);transform:translateY(-3px);
  box-shadow:0 16px 34px -14px rgba(94,96,205,.85)}
.sv__btn--g{border:1px solid var(--sv-rule);color:var(--sv-paper)}
.sv__btn--g:hover{border-color:var(--sv-lift);transform:translateY(-3px)}
.sv__btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--sv-e)}
.sv__btn--p:hover svg{transform:translateX(4px)}

.sv__trust{display:flex;flex-wrap:wrap;gap:18px;margin:0;padding:0;list-style:none}
.sv__trust li{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--sv-soft)}
.sv__trust li::before{content:"";width:13px;height:8px;flex:none;
  border-left:2px solid var(--sv-ok-d);border-bottom:2px solid var(--sv-ok-d);transform:rotate(-45deg)}

/* --- capture principale --- */
.sv__shot{border-radius:16px;overflow:hidden;border:1px solid var(--sv-rule);
  background:var(--sv-ink2);box-shadow:0 48px 90px -46px rgba(0,0,0,.92)}
.sv__bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--sv-rule)}
.sv__bar i{width:9px;height:9px;border-radius:50%;background:var(--sv-rule);flex:none}
.sv__bar i:first-child{background:var(--sv-brand);opacity:.6}
.sv__bar span{margin-left:10px;font-size:11px;color:var(--sv-dim)}
.sv__shot img{display:block;width:100%;height:auto}

/* ---------------------------------------------------------------- SECTIONS */
.sv__sec{padding:clamp(64px,9vh,116px) clamp(20px,5vw,72px)}
.sv__sec--light{background:var(--sv-paper);color:var(--sv-ink2)}
.sv__sec--dark{background:var(--sv-ink);color:var(--sv-paper)}
.sv__sec--white{background:var(--sv-white);color:var(--sv-ink2)}

.sv__kick{display:flex;align-items:center;gap:11px;margin:0 0 16px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--sv-brand)}
.sv__sec--dark .sv__kick{color:var(--sv-lift)}
.sv__kick::after{content:"";flex:1;max-width:200px;height:1px;background:currentColor;opacity:.3}

.sv__h2{margin:0 0 16px;font-size:clamp(1.8rem,3.4vw,2.9rem);line-height:1.08;
  letter-spacing:-.035em;font-weight:700}
.sv__sec--light .sv__h2,.sv__sec--white .sv__h2{color:var(--sv-ink)}
.sv__sec--dark .sv__h2{color:var(--sv-white)}
.sv__intro{margin:0 0 42px;max-width:62ch;line-height:1.66;color:var(--sv-muted)}
.sv__sec--dark .sv__intro{color:var(--sv-dim)}

/* --- constat --- */
.sv__pains{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(16px,2vw,26px)}
.sv__pain{padding:26px;border-radius:14px;border:1px solid var(--sv-rule);background:var(--sv-ink2)}
.sv__pain b{display:block;margin-bottom:9px;font-size:1.06rem;font-weight:650;color:var(--sv-white)}
.sv__pain p{margin:0;font-size:.93rem;line-height:1.6;color:var(--sv-dim)}
.sv__pain::before{content:"";display:block;width:26px;height:2px;background:var(--sv-lift);margin-bottom:16px;opacity:.7}

/* --- modules --- */
.sv__mod{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(28px,4vw,64px);align-items:center;
  padding:clamp(44px,6vh,76px) 0;border-top:1px solid var(--sv-line)}
.sv__mod:first-of-type{border-top:0;padding-top:0}
.sv__mod--flip{direction:rtl}
.sv__mod--flip > *{direction:ltr}
.sv__mod h3{margin:0 0 12px;font-size:clamp(1.4rem,2.3vw,1.95rem);line-height:1.12;
  letter-spacing:-.03em;font-weight:700;color:var(--sv-ink)}
.sv__mod > div > p{margin:0 0 20px;line-height:1.66;color:var(--sv-muted)}
.sv__feats{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.sv__feats li{position:relative;padding-left:26px;font-size:.95rem;line-height:1.5;color:var(--sv-ink2)}
.sv__feats li::before{content:"";position:absolute;left:0;top:.4em;width:13px;height:8px;
  border-left:2px solid var(--sv-brand);border-bottom:2px solid var(--sv-brand);transform:rotate(-45deg)}
.sv__frame{border-radius:14px;overflow:hidden;border:1px solid var(--sv-line);background:#fff;
  box-shadow:0 34px 70px -40px rgba(16,17,39,.4)}
.sv__frame img{display:block;width:100%;height:auto}

/* --- conformité --- */
.sv__conf{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(16px,2vw,26px)}
.sv__conf div{padding:24px;border-radius:14px;background:rgba(94,96,205,.07);border:1px solid rgba(94,96,205,.18)}
.sv__conf b{display:block;font-size:.95rem;font-weight:700;color:var(--sv-brand);margin-bottom:7px}
.sv__conf p{margin:0;font-size:.9rem;line-height:1.55;color:var(--sv-muted)}

/* --- tarifs --- */
.sv__plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(18px,2.4vw,30px)}
.sv__plan{padding:clamp(26px,3vw,38px);border-radius:18px;border:1px solid var(--sv-rule);background:var(--sv-ink2)}
.sv__plan--hl{border-color:var(--sv-brand);box-shadow:0 0 0 1px rgba(94,96,205,.35)}
.sv__plan h3{margin:0 0 6px;font-size:1.35rem;font-weight:700;color:var(--sv-white)}
.sv__plan > p{margin:0 0 22px;font-size:.9rem;color:var(--sv-dim)}
.sv__plan ul{margin:0 0 26px;padding:0;list-style:none;display:grid;gap:10px}
.sv__plan li{position:relative;padding-left:24px;font-size:.93rem;line-height:1.5;color:var(--sv-soft)}
.sv__plan li::before{content:"";position:absolute;left:0;top:.42em;width:12px;height:7px;
  border-left:2px solid var(--sv-lift);border-bottom:2px solid var(--sv-lift);transform:rotate(-45deg)}
.sv__note{margin-top:26px;font-size:.86rem;color:var(--sv-dim);text-align:center}

/* --- FAQ --- */
.sv__faq{display:grid;gap:12px;max-width:900px}
.sv__faq details{border:1px solid var(--sv-line);border-radius:12px;background:var(--sv-white);
  transition:border-color .3s var(--sv-e)}
.sv__faq details[open]{border-color:var(--sv-brand)}
.sv__faq summary{padding:18px 22px;cursor:pointer;font-weight:600;font-size:1rem;color:var(--sv-ink);
  list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.sv__faq summary::-webkit-details-marker{display:none}
.sv__faq summary::after{content:"";flex:none;width:9px;height:9px;
  border-right:2px solid var(--sv-brand);border-bottom:2px solid var(--sv-brand);
  transform:rotate(45deg);transition:transform .35s var(--sv-e)}
.sv__faq details[open] summary::after{transform:rotate(-135deg)}
.sv__faq p{margin:0;padding:0 22px 20px;line-height:1.66;color:var(--sv-muted)}

/* --- appel final --- */
.sv__final{text-align:center}
.sv__final .sv__h2{max-width:20ch;margin-inline:auto}
.sv__final p{margin:0 auto 30px;max-width:52ch;color:var(--sv-dim);line-height:1.62}
.sv__final .sv__cta{justify-content:center}

@media (max-width:1024px){
  .sv__hgrid,.sv__mod{grid-template-columns:1fr;gap:32px}
  .sv__mod--flip{direction:ltr}
  .sv__mod:first-of-type{padding-top:0}
}
@media (max-width:640px){
  .sv__btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.sv *{animation:none!important;transition:none!important}}