* { margin:0; padding:0; box-sizing:border-box; font-family:'Inter', sans-serif; }
body { background: linear-gradient(135deg,#06142b,#0a1f44,#0d2c63); color:white; overflow-x:hidden; scroll-behavior:smooth; }

/* ===== NAVBAR ===== */
.navbar { display:flex; justify-content:space-between; align-items:center; padding:20px 60px; position:fixed; width:100%; top:0; backdrop-filter:blur(12px); background:rgba(6,20,43,0.6); z-index:1000; }
.logo { font-size:26px; font-weight:800; color:#4da3ff; letter-spacing:1px; }
.nav-links { display:flex; }
.nav-links a { margin-left:30px; text-decoration:none; color:#cfe6ff; font-weight:500; transition:0.3s; }
.nav-links a:hover { color:white; }
.menu-toggle { display:none; font-size:28px; cursor:pointer; color:#4da3ff; }

/* ===== HERO ===== */
.hero { min-height:50vh; display:flex; align-items:center; justify-content:center; padding:120px 60px 80px; flex-direction:column; text-align:center; }
.hero h1 { font-size:clamp(32px,6vw,64px); font-weight:800; margin-bottom:20px; }
.hero p { font-size:18px; color:#cfe6ff; margin-bottom:40px; max-width:700px; }

/* ===== TOGGLE ABONNEMENT ===== */
.toggle-container { display:inline-flex; justify-content:center; margin-bottom:40px; gap:10px; background:rgba(255,255,255,0.1); border-radius:24px; padding:4px; }
.toggle-container button { background:transparent; border:none; color:#cfe6ff; font-weight:600; padding:10px 20px; border-radius:20px; cursor:pointer; transition:0.3s; }
.toggle-container button.active { background:#4da3ff; color:white; }

/* ===== TARIFS ===== */
.pricing-section { padding:80px 60px; text-align:center; }
.pricing-section h2 { font-size:clamp(28px,4vw,42px); margin-bottom:20px; }
.pricing-section p { color:#cfe6ff; max-width:700px; margin:auto; margin-bottom:60px; }

.pricing-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:30px; max-width:1200px; margin:auto; }

.pricing-card { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); padding:40px 30px; border-radius:22px; backdrop-filter:blur(14px); transition:0.4s; position:relative; }
.pricing-card:hover { transform:translateY(-8px); box-shadow:0 20px 40px rgba(0,0,0,0.5); }
.pricing-card h3 { color:#4da3ff; margin-bottom:12px; font-size:24px; }
.pricing-card .price { font-size:28px; font-weight:700; margin-bottom:10px; }
.pricing-card ul { text-align:left; margin-bottom:16px; }
.pricing-card ul li { margin:12px 0; font-size:15px; }

/* Note d'engagement / essai */
.pricing-card .note {
  display: block;
  font-size: 13px;
  color: #cfe6ff;
  margin: 16px 0 24px;
  text-align: center;
}

/* Badge “le plus populaire” */
.popular-badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:#FF9800; color:#111; font-weight:600; padding:6px 14px; border-radius:12px; font-size:14px; }
.pricing-card.popular .note { color: #FFEB3B; font-weight:600; }

/* Boutons */
.btn { padding:12px 24px; border-radius:14px; border:none; font-weight:600; cursor:pointer; transition:0.4s; width:100%; max-width:200px; margin:auto; display:block; }
.btn-primary { background:white; color:#0a1f44; box-shadow:0 10px 30px rgba(0,0,0,0.4); }
.btn-primary:hover { transform:translateY(-2px); }

/* ===== FOOTER ===== */
footer { padding:30px; text-align:center; color:#9ecbff; background:#06142b; }

/* ===== ANIMATION ===== */
.fade-up { opacity:0; transform:translateY(40px); transition:1s; }
.fade-up.visible { opacity:1; transform:translateY(0); }

/* ===== MEDIA ===== */
@media (max-width:1024px) { .navbar { padding:20px 30px; } .hero { padding:100px 30px 60px; } }
@media (max-width:768px) { .menu-toggle { display:block; } .nav-links { position:absolute; top:70px; right:0; width:100%; background:rgba(6,20,43,0.97); flex-direction:column; align-items:center; display:none; padding:20px 0; } .nav-links.active { display:flex; } .nav-links a { margin:15px 0; font-size:18px; } .pricing-section { padding:60px 20px; } .pricing-card { padding:30px 20px; } .btn { max-width:100%; } }
@media (max-width:480px) { .logo { font-size:22px; } }