:root{
  --purple:#8a00ff;
  --bg:#ffffff;
  --text:#222222;
  --muted:#666666;
  --card:#fcfcff;
}
*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; line-height:1.6}
.container{max-width:1000px;margin:0 auto;padding:24px}
.hero{display:flex;align-items:center;justify-content:center;text-align:center;padding:56px 0;background:linear-gradient(180deg, rgba(138,0,255,0.12), rgba(138,0,255,0.04))}
.logo{max-width:160px;height:auto;margin-bottom:8px}
.hero h1{margin:0;font-size:32px;color:var(--purple)}
.tagline{margin:8px 0 16px;font-size:16px;color:var(--muted)}
.hero-actions{display:flex;gap:12px;justify-content:center;margin-top:8px;flex-wrap:wrap}
.cta{display:inline-block;background:var(--purple);color:#fff;padding:12px 20px;border-radius:8px;text-decoration:none;font-weight:600}
.cta.ghost{background:transparent;color:var(--purple);border:2px solid var(--purple)}

.card{background:var(--card);padding:20px;border-radius:10px;margin:18px 0;box-shadow:0 6px 18px rgba(0,0,0,0.04)}
.card.small{font-size:14px}
h2{color:var(--purple);margin-top:0}
.services-list{list-style:none;padding:0;margin:0}
.services-list li{padding:10px 0;border-bottom:1px dashed #eee}

.contact-form label{display:block;margin:8px 0;font-size:14px}
.contact-form input,.contact-form textarea,.contact-form select{width:100%;padding:12px;border:1px solid #e6e6e6;border-radius:6px}
.contact-form button{background:var(--purple);color:#fff;padding:12px 18px;border:none;border-radius:6px;font-weight:600;cursor:pointer;margin-top:8px}
.note{font-size:13px;color:var(--muted);margin-top:8px}
.footer{padding:14px 0;text-align:center;color:var(--muted);font-size:14px}

/* Accessibilité */
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{left:8px;top:8px;width:auto;height:auto;background:#fff;border:2px solid var(--purple);padding:6px;border-radius:6px}

/* Barre mobile */
.mobile-bar{position:fixed;bottom:0;left:0;right:0;display:flex;gap:6px;justify-content:space-around;background:#fff;border-top:1px solid #eee;padding:10px 8px;z-index:9999}
.mobile-bar a{flex:1;text-align:center;text-decoration:none;background:var(--purple);color:#fff;padding:10px;border-radius:8px;font-weight:600}

/* Responsive */
@media(min-width:800px){
  .hero{padding:72px 0}
  .hero h1{font-size:40px}
  .mobile-bar{display:none}
}