:root{
  --bg:#0b0f1a; --fg:#e9eef7; --muted:#9aa7bf; --line:#1a2540;
  --card:#0f1629; --card2:#0c1222; --surface:rgba(255,255,255,.03);
  --accent:#2563eb; --accent-2:#3b82f6; --ring:rgba(37,99,235,.25);
  --ok:#10b981; --err:#ef4444;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f7f9ff; --fg:#0b1222; --muted:#5b6b84; --line:#e5e7eb;
    --card:#ffffff; --card2:#ffffff; --surface:#f3f4f6;
    --accent:#1d4ed8; --accent-2:#3b82f6; --ring:rgba(59,130,246,.22);
    --ok:#137333; --err:#c5221f;
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  /* Fond gris clair uniforme */
  background:#f3f4f6;
  color:var(--fg);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* ===== Nouveau layout “sectionné” ===== */
.wrap{max-width:1100px;margin:0 auto;padding:28px 16px;display:grid;gap:26px}

/* HERO bandeau */
.hero-neo{
  position:relative; border:1px solid var(--line); border-radius:20px; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)), var(--card);
  box-shadow:0 24px 50px rgba(2,6,23,.35); padding:26px;
  display:grid; grid-template-columns: 1.2fr .8fr; gap:20px; align-items:center;
}
@media (max-width: 960px){ .hero-neo{ grid-template-columns:1fr } }
.hero-neo h1{
  margin:0 0 10px 0; font:700 34px/1.1 Poppins,Inter,sans-serif; color:var(--accent)
}
.hero-neo p{margin:0 0 16px 0; color:var(--muted)}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:14px;
  text-decoration:none; font-weight:800; border:1px solid var(--line); cursor:pointer;
  background:linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%); color:#fff;
  box-shadow:0 16px 28px rgba(59,130,246,.35);
  transition:transform .06s ease, filter .15s ease;
}
.btn:hover{ transform:translateY(-1px); filter:saturate(1.05) }
.btn.ghost{ background:transparent; color:inherit; box-shadow:none }

/* Switch/mois-an */
.switch{
  display:inline-grid; grid-template-columns:1fr 1fr; border:1px solid var(--line);
  border-radius:999px; overflow:hidden; background:var(--surface);
}
.switch button{
  padding:8px 14px; background:transparent; color:inherit; border:0; cursor:pointer; font-weight:700
}
.switch .active{ background:rgba(59,130,246,.15) }

/* Grille tarifs — design différent des “price-card” précédentes */
.grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:18px;
}
@media (max-width: 880px){ .grid{grid-template-columns:1fr} }

.plan{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:18px; background:var(--card2);
  box-shadow:0 22px 48px rgba(2,6,23,.35); padding:22px; display:grid; gap:14px;
}
.plan::before{
  content:""; position:absolute; inset:-1px; pointer-events:none;
  background:radial-gradient(520px 180px at 12% -12%, rgba(59,130,246,.18), transparent 60%);
}
.plan h3{margin:0; font:700 20px/1.2 Poppins,Inter,sans-serif; color:var(--accent)}

/* Prix en vert */
.price{display:flex; align-items:baseline; gap:10px}
.price .big{font:800 30px/1 Poppins; color:var(--ok);}
.price .per{color:var(--muted); font-weight:600}

.tag{
  display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px;
  background:rgba(16,185,129,.12); color:var(--ok); border:1px solid rgba(16,185,129,.28);
  font-size:12px; font-weight:800;
}
.bad{background:rgba(239,68,68,.12); color:var(--err); border-color:rgba(239,68,68,.28)}
.features{margin:6px 0 4px 0; padding:0; list-style:none; display:grid; gap:10px}
.features li{display:flex; align-items:flex-start; gap:10px}
.features svg{flex:0 0 auto}
.actions{display:flex; gap:10px; flex-wrap:wrap}

/* Bandeau comparatif */
.compare{
  border:1px dashed var(--line); border-radius:16px; padding:14px; background:var(--surface);
  display:grid; gap:10px
}
.compare h4{ margin:0; font-weight:800; color:var(--accent) }
.cmp{
  display:grid; grid-template-columns:1fr 140px 1fr; gap:10px; align-items:center;
}
@media (max-width:760px){ .cmp{ grid-template-columns:1fr } }
.cmp .col{ border:1px solid var(--line); border-radius:12px; padding:12px; background:var(--card2) }

/* FAQ minimal */
details{
  border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--card2)
}
summary{cursor:pointer; font-weight:800; color:var(--accent)}