/* Base */
*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:#0f172a;background:#fff}img{max-width:100%;display:block}
:root{--primary:#77E268;--ink:#0b1220;--muted:#475569;--card:#f8fafc}
.wrap{width:min(1080px,92%);margin:0 auto}.wrap.narrow{width:min(860px,92%)}

/* Header */
.topbar{border-bottom:1px solid #edf2f7;background:#fff;position:sticky;top:0;z-index:40}
.logo{height:72px;margin:10px auto;display:block}

/* Hero */
.hero{background:linear-gradient(180deg,#ffffff 0%,#f7fff5 100%);padding:48px 0 24px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center}
.text h1{font-size:clamp(28px,4vw,44px);line-height:1.1;margin:0 0 12px}
.lead{color:var(--muted);font-size:clamp(16px,2vw,18px)}
.photo img{border-radius:16px;box-shadow:0 12px 30px rgba(0,0,0,.08)}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}.cta.center{justify-content:center}
.btn{text-decoration:none;border:2px solid var(--primary);padding:12px 16px;border-radius:10px;font-weight:700}
.btn.primary{background:var(--primary);color:#064e3b}.btn.dark{background:#0b1220;color:#fff;border-color:#0b1220}.btn.ghost{color:#0b1220}

/* Sections */
section{padding:56px 0}section h2{font-size:clamp(22px,3vw,32px);margin:0 0 10px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--card);border:1px solid #e6eef6;border-radius:14px;padding:20px}
.card .price{font-size:26px;font-weight:800;margin:6px 0 14px}
.card ul{margin:0 0 18px;padding-left:18px;color:var(--muted)}
.card.highlight{border-color:var(--primary);box-shadow:0 12px 24px rgba(119,226,104,.25)}

/* Footer */
.footer{background:#f1f5f9;padding:26px 0;color:#334155}

/* Responsive */
@media (max-width:900px){
 .hero-grid{grid-template-columns:1fr}
 .cards{grid-template-columns:1fr}
 .logo{height:64px}
}

/* === Before/After Comparator === */
.compare {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid #e6eef6;
  background: #000;
}
.compare .layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.compare .after {
  clip-path: inset(0 0 0 50%);
}
.compare .slider {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  outline: none;
  margin: 0;
  cursor: col-resize;
}
.compare .handle {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(255,255,255,.3);
  transform: translateX(-50%);
  left: 50%;
}
.compare .labels {
  position: absolute;
  display: flex;
  justify-content: space-between;
  inset: auto 0 10px 0;
  padding: 0 10px;
  pointer-events: none;
  mix-blend-mode: difference;
  color: #fff;
  font-weight: 700;
}
.compare.small .labels { font-size: 12px; }
.compare.large .labels { font-size: 14px; }
.compares { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) {
  .compares { grid-template-columns: 1fr; }
}


/* Escasez ribbon */
.limited-ribbon{
  background:#fff3cd;
  color:#8a6d3b;
  text-align:center;
  padding:.6rem .8rem;
  border-bottom:1px solid #f0e1a6;
  font-weight:600;
  font-size:.95rem;
}

/* Badge secondaire pour places restantes */
.badge-secondary{
  position:absolute;
  top:38px;
  left:50%;
  transform:translateX(-50%);
  background:#1f2937;
  color:#fff;
  padding:.25rem .6rem;
  border-radius:9999px;
  font-size:.78rem;
  font-weight:700;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  white-space:nowrap;
}

.secure-note{
  margin-top:.5rem;
  font-size:.8rem;
  color:#6b7280;
  text-align:center;
}

.slots-info{
  margin-top:.25rem;
  font-size:.85rem;
  font-weight:600;
  color:#374151;
  text-align:center;
}


/* Recommended plan style */
.recommended{
  border: 2px solid #ff9800;
  background: #fff8e1;
  position: relative;
}
.badge{
  position:absolute;
  top:-10px;
  left:50%;
  transform:translateX(-50%);
  background:#ff9800;
  color:white;
  padding:0.25rem 0.75rem;
  border-radius:12px;
  font-size:0.8rem;
  font-weight:bold;
}
.badge-secondary{
  position:absolute;
  top:25px; /* lower to avoid overlap with badge */
  left:50%;
  transform:translateX(-50%);
  background:#1f2937;
  color:#fff;
  padding:.25rem .6rem;
  border-radius:9999px;
  font-size:.78rem;
  font-weight:700;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  white-space:nowrap;
}
/* Separate slots-info from button */
.slots-info{
  margin-top:0.8rem; /* increased space */
  font-size:.85rem;
  font-weight:600;
  color:#374151;
  text-align:center;
}
.secure-note{
  margin-top:0.4rem;
  font-size:.8rem;
  color:#6b7280;
  text-align:center;
}