:root{
  --bg:#0c0c11; --card:#171821; --muted:#b9bfd3; --text:#fff;
  --accent:#e94aa6; --accent-2:#9b5cf6; --ring:rgba(233,74,166,.35);
  --border:rgba(255,255,255,.08);
  --shadow:0 10px 30px rgba(233,74,166,.20),0 6px 16px rgba(155,92,246,.15);
  --radius:16px; --radius-lg:20px; --max:1080px;
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  background:radial-gradient(1200px 600px at 50% -200px,rgba(155,92,246,.15),transparent),var(--bg);
  color:var(--text);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
a{color:var(--text);text-decoration:none}

.container{max-width:var(--max);margin:0 auto;padding:0 20px}

/* Header / nav */
header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(180%) blur(8px);
  background:linear-gradient(to bottom,rgba(12,12,17,.8),rgba(12,12,17,.6));
  border-bottom:1px solid var(--border);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;gap:10px;align-items:center}
.brand img{width:28px;height:28px;border-radius:8px;box-shadow:var(--shadow)}
.brand span{font-weight:700;letter-spacing:.2px}
.navlinks{display:flex;gap:14px;align-items:center}

.badge{
  display:inline-block;padding:6px 10px;border-radius:999px;font-size:12px;
  background:rgba(233,74,166,.15);color:#ffd1ec;border:1px solid rgba(233,74,166,.35);
}

.btn{
  display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;
  border-radius:10px;border:1px solid var(--border);background:rgba(255,255,255,.02);
}
.btn:hover{border-color:rgba(255,255,255,.15)}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));border:0;color:#fff;box-shadow:var(--shadow)}
.btn-ghost{background:transparent;border:1px solid var(--border)}

.muted{color:var(--muted)}
.hero{padding:72px 0 40px}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:28px}
.hero h1{font-size:42px;line-height:1.1;margin:14px 0 12px}
.lead{font-size:18px;color:#e8e9f0;opacity:.92;max-width:720px}
.cta{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}

.card{
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));
  border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;
}
.glass{background:linear-gradient(140deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid var(--border)}

section{padding:28px 0}
h2{font-size:28px;margin:0 0 12px}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

.feature{padding:16px}
.feature h3{margin:8px 0 6px}

/* Utilitaires (pour remplacer les styles inline) */
.card-title{margin:0 0 10px}
.mt-16{margin-top:16px}
.mt-12{margin-top:12px}

.price{display:flex;align-items:baseline;gap:10px;margin:6px 0 2px}
.price .big{font-size:28px;font-weight:800}
.price .per{font-size:14px;color:var(--muted)}

.list{margin:10px 0 0;padding:0;list-style:none}
.list li{display:flex;gap:10px;align-items:flex-start;margin:8px 0}
.list .dot{margin-top:4px;width:8px;height:8px;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--accent-2))}

.legal small{color:var(--muted)}

footer{border-top:1px solid var(--border);margin-top:30px}
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 18px;
  padding: 10px 20px; /* haut/bas 24px, gauche/droite 20px */
}.small{font-size:13px;color:var(--muted)}

@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr}
  .grid-3,.grid-2{grid-template-columns:1fr}
}

/* ---- Phone mockup ---- */
.mockup{
  aspect-ratio:390/844;width:100%;margin:0;border-radius:12px;overflow:hidden;
  border:1px solid var(--border);
  background:linear-gradient(160deg,rgba(233,74,166,.10),rgba(155,92,246,.08) 40%,rgba(255,255,255,.03));
  box-shadow:0 8px 24px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;
}
.mockup>img{width:100%;height:100%;object-fit:contain;display:block}

/* --- Feature icons --- */
.feat-icon{
  width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:10px;border:1px solid var(--border);
  background:linear-gradient(135deg,rgba(233,74,166,.18),rgba(155,92,246,.15));
  box-shadow:0 6px 18px rgba(233,74,166,.15);
}
.feat-icon svg{width:20px;height:20px;fill:#ffd1ec}
.feature .head{display:flex;align-items:center;gap:10px}

/* Version compacte pour mobile */
/* --- Burger menu --- */
.burger {
  display: none;
  font-size: 1.5rem;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
}

/* Navigation par défaut */
.navlinks {
  display: flex;
  gap: 1rem;
  align-items: center;
}

/* Responsive */
@media (max-width: 768px) {
  .burger {
    display: block;
  }

  .navlinks {
    display: none;
    flex-direction: column;
    background: #111;
    position: absolute;
    top: 60px; /* hauteur du header */
    right: 0;
    width: 200px;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  }

  .navlinks.active {
    display: flex;
  }
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px; /* espace entre le drapeau et le burger */
}

.nav-actions .lang-switch {
  font-size: 0.9rem;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.05);
  transition: background 0.2s ease;
}

.nav-actions .lang-switch:hover {
  background: rgba(255,255,255,0.15);
}