/* Styles communs des pages de vente (copiés de la page Hacking the Moroccan Mind). */
.sp-top{background:var(--ink);color:var(--paper);text-align:center;padding:12px 16px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.sp-top b{color:var(--gold)}
.sp-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;padding:60px 0 70px}
.sp-hero h1{font-size:72px;margin:18px 0 22px}
.sp-hero h1 em{display:block;font-size:80px}
.sp-hero p.lead{font-size:19px;line-height:1.65;font-weight:300;max-width:540px}
.pricebox{display:flex;align-items:baseline;gap:16px;margin:30px 0 22px;flex-wrap:wrap}
.pricebox s{font-family:Montserrat;font-size:26px;opacity:.5;text-decoration-color:#C8102E;text-decoration-thickness:3px}
.pricebox b{font-family:Montserrat;font-size:52px;color:var(--burg);letter-spacing:-.03em}
.pricebox span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe)}
.buy-xl{display:inline-flex;background:#C8102E;color:#fff;font-family:Montserrat;font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;padding:20px 32px;border-radius:999px;box-shadow:0 14px 30px rgba(200,16,46,.25)}
.trust{margin-top:16px;font-size:12px;color:var(--taupe);letter-spacing:.06em}
.sp-wheel{background:var(--ink);border-radius:28px;padding:40px;color:var(--paper);text-align:center;position:relative}
.sp-wheel svg{width:280px;height:280px;margin:0 auto;display:block}
.sp-wheel .legend{margin-top:16px;font-size:14px}.sp-wheel .legend b{color:var(--gold)}
.sp-wheel .bs{position:absolute;top:22px;right:22px}
.band2{background:var(--burg);color:var(--paper);padding:18px 0;overflow:hidden;white-space:nowrap;font-family:Montserrat;font-weight:600;font-size:13px;letter-spacing:.3em}
.band2 .track{display:inline-block;animation:marq 35s linear infinite}
.band2 b{color:var(--gold);margin:0 22px}
.mods{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mod{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px 24px}
.mod .n{font-family:'Playfair Display';font-style:italic;color:var(--burg);font-size:34px}
.mod h3{font-size:21px;margin:10px 0 10px}
.mod p{font-size:14px;line-height:1.65;font-weight:300;color:#4a4648}
.mod ul{margin-top:10px;padding-left:18px;font-size:13px;line-height:1.7;color:#4a4648}
.inside{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.inside ul{list-style:none}
.inside li{padding:14px 0;border-bottom:1px solid var(--line);font-size:16px;display:flex;gap:14px}
.inside li:before{content:"✦";color:var(--burg)}
.inside .phone{max-width:300px}
.fit{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fit div{border-radius:22px;padding:30px}
.fit .yes{background:#fff;border:1px solid var(--line)}
.fit .no{background:var(--paper2)}
.fit h3{font-size:22px;margin-bottom:14px}
.fit li{list-style:none;padding:8px 0;font-size:15px;font-weight:300}
.fit .yes li:before{content:"✓  ";color:var(--burg);font-weight:700}
.fit .no li:before{content:"✕  ";color:#B5ADA3;font-weight:700}
.faq details{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 24px;margin-bottom:12px}
.faq summary{font-family:Montserrat;font-weight:700;font-size:17px;cursor:pointer;list-style:none}
.faq summary::after{content:"+";float:right;color:var(--burg)}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:12px;font-size:15px;line-height:1.7;font-weight:300;color:#4a4648}
.growth{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:center}
.growth h2{font-size:46px;margin-top:12px}
.growth p.lead{font-size:16px;line-height:1.7;font-weight:300;margin-top:14px;color:#4a4648}
.toggle{display:inline-flex;background:var(--paper2);border-radius:999px;padding:4px;margin-top:22px}
.toggle button{border:0;background:transparent;font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:11px 18px;border-radius:999px;cursor:pointer;color:var(--ink);transition:background .2s,color .2s}
.toggle button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.chart{background:#fff;border:1px solid var(--line);border-radius:24px;padding:22px 18px 14px}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart .grid line{stroke:var(--line);stroke-width:1}
.chart .ax{font-size:12px;fill:var(--taupe);font-family:'Open Sans',sans-serif}
.chart .with{fill:none;stroke:#C8102E;stroke-width:4;stroke-linecap:round}
.chart .without{fill:none;stroke:#B5ADA3;stroke-width:2.5;stroke-dasharray:6 7}
.chart .area{fill:url(#gfill)}
.chart .dot{fill:#fff;stroke:#C8102E;stroke-width:3}
.chart .val{font-family:Montserrat;font-weight:700;font-size:15px;fill:var(--ink)}
.chart.draw .with{stroke-dasharray:1000;stroke-dashoffset:1000;animation:drawl 1.6s cubic-bezier(.2,.8,.2,1) forwards}
.chart.draw .dot,.chart.draw .val,.chart.draw .area{opacity:0;animation:fadein .4s ease forwards}
.chart.draw .p1{animation-delay:.5s}.chart.draw .p2{animation-delay:.9s}.chart.draw .p3{animation-delay:1.3s}.chart.draw .area{animation-delay:.8s}
@keyframes drawl{to{stroke-dashoffset:0}}
@keyframes fadein{to{opacity:1}}
.legend2{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:#4a4648;margin:10px 6px 0}
.legend2 i{display:inline-block;width:22px;height:4px;border-radius:4px;vertical-align:middle;margin-right:8px;background:#C8102E}
.legend2 i.d{background:repeating-linear-gradient(90deg,#B5ADA3 0 6px,transparent 6px 12px)}
.honest{font-size:12px;line-height:1.6;color:var(--taupe);margin-top:14px}
@media (max-width:900px){.growth{grid-template-columns:1fr;gap:28px}.growth h2{font-size:34px}}
@media (prefers-reduced-motion:reduce){.chart.draw .with,.chart.draw .dot,.chart.draw .val,.chart.draw .area{animation:none;opacity:1;stroke-dashoffset:0}}
.final{background:var(--ink);color:var(--paper);border-radius:28px;padding:60px 40px;text-align:center}
.final h2{font-size:48px;margin-bottom:14px}.final h2 em{color:#E6C9AE}
.final .pricebox{justify-content:center}.final .pricebox b{color:var(--gold)}
@media (max-width:760px){
  .sp-hero{grid-template-columns:1fr;padding:30px 0 40px;gap:30px}
  .sp-hero h1{font-size:42px}.sp-hero h1 em{font-size:46px}
  .mods,.inside,.fit{grid-template-columns:1fr}
  .pricebox b{font-size:40px}
  .final{padding:40px 22px}.final h2{font-size:32px}
  .sp-wheel svg{width:220px;height:220px}
}