@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');
*{box-sizing:border-box}html,body{margin:0}body{font-family:'Montserrat',sans-serif}.pricing{--pink:#f50072;--green:#45d9ad;--blue:#2995f0;--purple:#aa43ec;--orange:#f4a62a;position:relative;overflow:hidden;background:radial-gradient(circle at 52% 28%,#1b2024 0,#111519 48%,#0d1013 100%);color:#fff;padding-top:65px}.pricing-glow{position:absolute;width:850px;height:500px;top:-330px;left:34%;border-radius:50%;border:1px solid #402033;background:radial-gradient(circle,#24151f,#13191c 67%,transparent 68%);opacity:.8}.pricing-wrap{position:relative;z-index:2;width:min(1490px,calc(100% - 110px));margin:auto}.pricing-head{display:grid;grid-template-columns:48% 20% 32%;min-height:260px;align-items:start}.eyebrow{color:var(--pink);font-size:15px;font-weight:900;letter-spacing:.04em;margin:0 0 14px}.pricing-title h2{font-size:68px;line-height:.98;letter-spacing:-.05em;margin:0;font-weight:900}.pricing-title h2 span{color:var(--pink)}.pricing-title p{font-size:19px;line-height:1.35;color:#f0f0f2;margin:18px 0 0}.hand-note{color:#62e6b8;font-family:'Montserrat',sans-serif;font-size:22px;line-height:1.35;transform:rotate(-5deg);padding:10px 0 0;text-align:center}.hand-note span{display:block;font-size:55px;line-height:1;transform:rotate(13deg);margin:5px 0 0 70px}.pricing-callout{height:130px;border:1px solid var(--pink);border-radius:15px;background:radial-gradient(circle at 12% 50%,#4b2638,#201b22 45%,#17191c);display:flex;align-items:center;gap:22px;padding:20px 23px}.callout-icon{width:78px;height:78px;border-radius:50%;background:#ffe1ee;color:var(--pink);display:grid;place-items:center;flex:none}.callout-icon svg{width:42px;fill:none;stroke:currentColor;stroke-width:3}.pricing-callout strong{font-size:17px}.pricing-callout p{font-size:13px;line-height:1.45;color:#dddde2;margin:8px 0 0}

.pricing-main{display:grid;grid-template-columns:1.02fr 1fr;gap:18px;padding-bottom:30px}.calculator,.features{border:1px solid #3b4148;border-radius:14px;background:linear-gradient(145deg,rgba(30,34,38,.93),rgba(17,20,23,.96));box-shadow:inset 0 1px 0 #ffffff08}.calculator{padding:26px}.calc-top{display:grid;grid-template-columns:90px 1fr 135px;align-items:center}.people-icon{width:82px;height:82px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--pink);background:#301221;color:var(--pink)}.people-icon svg{width:50px;fill:none;stroke:currentColor;stroke-width:2.5}.calc-label{display:flex;flex-direction:column;gap:6px}.calc-label strong{font-size:17px}.calc-label span{font-size:14px;color:#d6d7dc}#clientOutput{height:84px;border:1px solid #41464d;border-radius:12px;background:#23272b;display:flex;flex-direction:column;align-items:center;justify-content:center}#clientOutput b{font-size:34px;line-height:1}#clientOutput span{font-size:11px;font-weight:bold;margin-top:5px}
.range-area{margin:20px 0 26px}.range-area input{--fill:10%;width:100%;appearance:none;height:7px;border-radius:8px;background:linear-gradient(to right,var(--pink) var(--fill),#5a6066 var(--fill));outline:none}.range-area input::-webkit-slider-thumb{appearance:none;width:27px;height:27px;border-radius:50%;background:var(--pink);border:8px solid #ed187b;box-shadow:0 0 18px #f5007270;cursor:pointer}.range-area input::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:7px solid var(--pink);cursor:pointer}.ticks{display:flex;justify-content:space-between;color:#cfd2d7;font-size:12px;margin-top:9px}.ticks span:before{content:"";display:block;width:1px;height:9px;background:#bbb;margin:0 auto 8px}
.billing{width:405px;height:68px;background:#262a2e;border-radius:13px;padding:8px;display:flex;align-items:center;gap:9px}.billing-btn{border:0;background:transparent;color:#c9cbd1;font-size:14px;padding:14px 43px;border-radius:11px;cursor:pointer}.billing-btn.active{background:linear-gradient(90deg,#f00070,#ff087c);color:#fff;font-weight:800;box-shadow:0 8px 20px #f5007230}.free-month{background:#6ce4bd;color:#062a21;padding:10px 13px;border-radius:20px;font-size:12px;font-weight:800;white-space:nowrap;box-shadow:0 0 18px #45d9ad55}.price-row{display:flex;align-items:center;justify-content:space-between;margin-top:24px}.price{display:flex;align-items:flex-end;gap:9px}.price strong{font-size:74px;line-height:.9;letter-spacing:-.05em}.price span{font-size:24px;color:#c8cbd2}.start-btn{width:310px;background:linear-gradient(90deg,#ed006d,#ff087d);border-radius:34px;color:#fff;text-decoration:none;padding:19px 25px;text-align:center;font-size:15px;font-weight:800}.start-btn b{font-size:23px;margin-left:22px}.price-meta{display:flex;justify-content:space-between;align-items:center;margin-top:17px;font-size:12px;color:#d5d7dc}

.features{padding:31px 24px 20px}.features h3{font-size:22px;margin:0 0 28px}.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:27px 30px}.feature{display:grid;grid-template-columns:65px 1fr;gap:13px;align-items:center}.feature:nth-child(even){border-left:1px solid #3c4147;padding-left:22px}.ficon{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;border:1px solid currentColor}.ficon svg{width:37px;height:37px;fill:none;stroke:currentColor;stroke-width:2.4}.pink{color:#f50072;background:#37121f}.green{color:#4ce0b1;background:#12352d}.blue{color:#2995f0;background:#102c43}.purple{color:#ad4ded;background:#2b1738}.orange{color:#f5aa32;background:#382c17}.teal{color:#37d8c6;background:#113735}.feature strong{font-size:14px;line-height:1.25}.feature p{font-size:13px;color:#d3d5da;line-height:1.35;margin:5px 0 0}.feature-bottom{border-top:1px solid #3b4147;margin-top:25px;padding-top:22px;display:grid;grid-template-columns:1fr 1fr}.feature-bottom>div{display:grid;grid-template-columns:47px 1fr;gap:12px}.feature-bottom>div+div{border-left:1px solid #3b4147;padding-left:23px}.mini-icon svg{width:39px;height:39px;fill:none;stroke:#fff;stroke-width:2.4}.feature-bottom strong{font-size:13px}.feature-bottom p{font-size:11px;color:#cfd2d7;line-height:1.45;margin:5px 0}

.pricing-benefits{position:relative;z-index:2;background:#fff;color:#10131a;display:grid;grid-template-columns:repeat(4,1fr);padding:38px max(3.5vw,45px);margin-top:0}.pricing-benefits article{display:flex;gap:20px;align-items:center;padding:0 43px;border-right:1px solid #d5dae0}.pricing-benefits article:first-child{padding-left:0}.pricing-benefits article:last-child{border:0}.bicon{width:72px;height:72px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:33px;font-weight:500}.pricing-benefits .pink{background:#ffe1ed;color:var(--pink)}.pricing-benefits .blue{background:#e4f1ff;color:#2387e0}.pricing-benefits .green{background:#dcf8ef;color:#00a77b}.pricing-benefits .purple{background:#f0dcff;color:#932be1}.pricing-benefits strong{font-size:15px;line-height:1.2}.pricing-benefits p{font-size:13px;color:#617087;line-height:1.4;margin:5px 0 0}

@media(max-width:1200px){.pricing-wrap{width:calc(100% - 40px)}.pricing-head{grid-template-columns:1fr 1fr}.pricing-title{grid-column:1/-1}.hand-note{display:none}.pricing-callout{margin:25px 0}.pricing-main{grid-template-columns:1fr}.pricing-benefits{grid-template-columns:1fr 1fr;gap:25px}.pricing-benefits article:nth-child(2){border-right:0}}
@media(max-width:720px){.pricing{padding-top:40px}.pricing-title h2{font-size:48px}.pricing-title p br{display:none}.pricing-head{display:block}.pricing-callout{height:auto}.calculator{padding:18px}.calc-top{grid-template-columns:65px 1fr}.people-icon{width:58px;height:58px}.calc-top output{grid-column:1/-1;margin-top:15px}.billing{width:100%;height:auto;flex-wrap:wrap}.billing-btn{padding:12px 25px}.price-row{align-items:flex-start;flex-direction:column;gap:22px}.price strong{font-size:55px}.start-btn{width:100%}.price-meta{align-items:flex-start;flex-direction:column;gap:7px}.feature-grid{grid-template-columns:1fr}.feature:nth-child(even){border:0;padding-left:0}.feature-bottom{grid-template-columns:1fr;gap:20px}.feature-bottom>div+div{border-left:0;border-top:1px solid #3b4147;padding:20px 0 0}.pricing-benefits{grid-template-columns:1fr;padding:20px}.pricing-benefits article,.pricing-benefits article:first-child{padding:18px 0;border-right:0;border-bottom:1px solid #d5dae0}.pricing-benefits article:last-child{border-bottom:0}}

button,input,select,textarea{font-family:'Montserrat',sans-serif}

/* ===== Responsive renforcé ===== */
@media(max-width:1024px){.pricing-wrap{width:calc(100% - 48px)}.pricing-title h2{font-size:clamp(42px,6vw,56px)}}
@media(max-width:600px){.pricing-wrap{width:calc(100% - 28px)}.pricing{padding-top:38px}.pricing-title h2{font-size:34px;line-height:1.05;letter-spacing:-1.3px}.pricing-title p{font-size:15px}.calculator{padding:16px;border-radius:14px}.price strong{font-size:46px}.pricing-benefits{padding:16px}.floating-subscribe{display:none}}

@media (min-width:721px) and (max-width:1500px){
  .pricing-wrap{width:min(1180px,calc(100% - 64px))}
  .pricing-title h2{font-size:52px}
  .pricing-title p{font-size:16px}
}

/* ===== TARIFS — VERSION PROPRE DU CALCULATEUR ===== */
.feature-bottom strong{display:block;line-height:1.35}

/* Le range est volontairement décalé vers la gauche. */
.range-area{
  position:relative;
  left:-18px;
  width:calc(100% - 2px);
  margin:34px 0 38px;
  padding:0;
}

/* Une seule piste : le fond du input lui-même.
   Le rose est recalculé à chaque mouvement avec --pct. */
#clientRange{
  --pct:8.333%;
  display:block;
  width:100%;
  height:26px;
  margin:0;
  padding:0;
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  cursor:pointer;
  outline:none;
}

#clientRange::-webkit-slider-runnable-track{
  height:6px;
  border:0;
  border-radius:999px;
  background:linear-gradient(
    to right,
    #f50072 0,
    #f50072 var(--pct),
    #666c72 var(--pct),
    #666c72 100%
  );
}
#clientRange::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:26px;
  height:26px;
  margin-top:-10px;
  border:7px solid #ed187b;
  border-radius:50%;
  background:#f50072;
  box-shadow:0 0 16px rgba(245,0,114,.35);
}

#clientRange::-moz-range-track{
  height:6px;
  border:0;
  border-radius:999px;
  background:#666c72;
}
#clientRange::-moz-range-progress{
  height:6px;
  border-radius:999px;
  background:#f50072;
}
#clientRange::-moz-range-thumb{
  box-sizing:border-box;
  width:26px;
  height:26px;
  border:7px solid #ed187b;
  border-radius:50%;
  background:#f50072;
  box-shadow:0 0 16px rgba(245,0,114,.35);
}

/* Les libellés sont calés sur les centres extrêmes du thumb. */
.range-area .ticks{
  display:flex;
  justify-content:space-between;
  width:auto;
  margin:7px 13px 0;
  padding:0;
  color:#cfd2d7;
  font-size:12px;
}
.range-area .ticks span:before{
  content:"";
  display:block;
  width:1px;
  height:9px;
  margin:0 auto 8px;
  background:#bbb;
}

/* Sélecteur compact. */
.billing{
  width:auto;
  max-width:max-content;
  height:68px;
  padding:8px;
  gap:6px;
}
.billing-btn{
  min-width:132px;
  padding:14px 26px;
}

/* 1 mois offert : discret en mensuel, actif en annuel. */
.annual-benefit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:58px;
  min-width:58px;
  padding:0 5px;
  margin:4px 3px;
  border:1px solid #45494f;
  border-radius:999px;
  background:transparent;
  color:#858a90;
  opacity:.72;
  font-size:9px;
  font-weight:650;
  line-height:1.05;
  text-align:center;
}
.annual-benefit.is-active{
  border-color:#67e3c0;
  background:#67e3c0;
  color:#101317;
  opacity:1;
}

.price-row{margin-top:30px}
.price-meta{margin-top:18px}

@media(max-width:900px){
  .feature-bottom strong{font-size:12px}
}
@media(max-width:700px){
  .range-area{
    left:-8px;
    width:100%;
    margin:28px 0 32px;
  }
  .billing-btn{
    min-width:105px;
    padding:12px 18px;
  }
}


/* ===== ALIGNEMENT EXACT POIGNÉE / GRADUATIONS ===== */
.range-area{
  --range-thumb:26px;
}

/* The labels occupy exactly the native thumb-centre travel distance. */
.range-area .ticks{
  margin-left:calc(var(--range-thumb) / 2) !important;
  margin-right:calc(var(--range-thumb) / 2) !important;
}

/* Each label is centered on its own anchor point. */
.range-area .ticks span{
  flex:0 0 auto !important;
  width:0 !important;
  overflow:visible !important;
  white-space:nowrap !important;
  text-align:center !important;
  transform:translateX(-50%) !important;
}

/* First/last labels must also be centered on their endpoint anchors. */
.range-area .ticks span:first-child,
.range-area .ticks span:last-child{
  transform:translateX(-50%) !important;
}


/* ===== GRADUATIONS = POSITIONS RÉELLES DES PALIERS ===== */
.range-area .ticks{
  position:relative !important;
  display:block !important;
  height:34px !important;
  margin:7px 13px 0 !important;
  padding:0 !important;
}
.range-area .ticks span{
  position:absolute !important;
  left:var(--pos) !important;
  top:0 !important;
  width:max-content !important;
  transform:translateX(-50%) !important;
  text-align:center !important;
  white-space:nowrap !important;
  font-size:12px !important;
}
.range-area .ticks span::before{
  content:"" !important;
  display:block !important;
  width:1px !important;
  height:9px !important;
  margin:0 auto 8px !important;
  background:#bbb !important;
}


/* ===== LARGEUR COMMUNE = HERO ===== */
@media (min-width:761px){
  .pricing-wrap{width:min(1440px,calc(100% - 96px)) !important;}
}

/* ===== BANDEAU AVANTAGES ALIGNÉ SUR LA LARGEUR HERO (24/09/2026) ===== */
@media (min-width:761px){
  .pricing-benefits{padding-left:max(48px,calc((100% - 1440px) / 2)) !important;padding-right:max(48px,calc((100% - 1440px) / 2)) !important}
}
@media (max-width:760px){
  .pricing-wrap{width:calc(100% - 32px) !important}
  .pricing-benefits{padding-left:16px !important;padding-right:16px !important}
}
/* Prix simulateur : montant, devise et unite sur une seule ligne */
.price{flex-wrap:nowrap;flex-shrink:0}
.price strong,.price span{white-space:nowrap}

/* Taille montant et devise */
.price strong{font-size:56px}
.price strong .price-cur{font-size:.55em;color:#fff;margin-left:6px;letter-spacing:0}
@media(max-width:720px){.price strong{font-size:44px}}
@media(max-width:600px){.price strong{font-size:38px}}
