/* =========================================================
   MAIN.CSS
   RÔLE : base globale commune à tout Zutil
========================================================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

a {
  color: inherit;
  text-decoration: none;
}

.hidden {
  display: none !important;
}

/* =========================================================
   DESIGN SYSTEM — couleurs globales
========================================================== */
:root {
  --bg: #f6f7fb;
  --text: #0f172a;
  --muted: #667085;
  --card: rgba(255,255,255,0.76);
  --white: #ffffff;

  --blue: #3157ff;
  --purple: #7c3aed;
  --green: #10a36d;
  --orange: #f59e0b;
  --pink: #db2777;
  --dark: #0f172a;

  --border: rgba(15,23,42,0.09);
  --shadow: 0 24px 70px rgba(15,23,42,0.11);
  --shadow-strong: 0 34px 90px rgba(15,23,42,0.18);
  --radius: 28px;
}

/* =========================================================
   BASE PAGE
========================================================== */
body {
  margin: 0;
  font-family: "Inter", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 8% 8%, rgba(49,87,255,0.16), transparent 28%),
    radial-gradient(circle at 92% 10%, rgba(124,58,237,0.16), transparent 28%),
    radial-gradient(circle at 50% 95%, rgba(16,163,109,0.13), transparent 32%),
    var(--bg);
  min-height: 100vh;
  overflow-x: hidden;
}

.container {
  width: min(1180px, 92%);
  margin: auto;
}